@extends('layout.layout')
@section('reporting','active')
@section('content')

<!-- Main content -->
<section class="content">

     <section class="content-header">
        <div class="container-fluid">

            <!-- Subtitle -->
            <div class="row mb-2 mt-3">
                <div class="col-sm-12 pl-3 pr-3">
                    <h1 class="text-ultra"><a href="javascript:history.back()" id="arrow-right"><i class="fas fa-angle-left mr-2"></i></a> Wall Sales</h1>
                    @include('wall-sales.wall-search')
                </div>

                @if ($role == 2)
                <div class="card-header col-sm-12 d-flex align-items-center">
                    <h3 class="card-title mt-2 text-medium d-flex align-items-center">
                        <b style="font-family: 'Gotham-Medium';">Wall List</b>
                        <button class="btn btn-sm ml-2" onclick="wall_register.registerModal()" style="background-color:black; color:white">
                            <i class="fas fa-plus"></i>
                        </button>
                    </h3>
                    <div id="wall-count" class="d-flex ml-auto" style="font-family: 'Gotham-Book';">
                        <button class="btn btn-sm mt-1 ml-auto" style="background-color:#ffdd00; color:black; font-family: 'Gotham-Book'; border-radius:20px;padding:10px;">
                            <i class="fas fa-warehouse mr-2"></i>{{count($walls)}} walls
                        </button>
                    </div>
                </div>
                @endif
            </div>
            @if ($role == 2)
            <div id="wall-list" class="mt-1 pr-1 pl-1">
                @forelse ($walls as $wall)
                    <div class="card mb-2 p-3"
                        style="border-radius: 12px; background-color: #f8f8f8;
                                box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15); font-family: 'Gotham-Book';">
                        <a href="{{ route('wall.sales.wall.information', ['wall_list_id' => $wall->wall_list_id]) }}" 
                           style="text-decoration: none; color: inherit;">
                            <div class="d-flex align-items-center">
                                <div>
                                     @if(!empty($wall->qr_code) && file_exists(public_path($wall->qr_code)))
                                        <img src="{{ asset($wall->qr_code) }}" 
                                            alt="QR Code" 
                                            style="width: 40px; height: 40px;">
                                    @else
                                        <i class="fas fa-qrcode ml-2 mr-2"
                                        style="font-size: 1.8rem; color:#555;"></i>
                                    @endif
                                </div>

                                <!-- Wall details -->
                                <div class="ml-3 flex-fill">
                                    <div class="d-flex">
                                        <strong style="font-family: 'Gotham-Medium'; font-size: 1rem;color:#333;">
                                            {{ $wall->wall_serial }} 
                                        </strong>
                                        <span class="badge badge-primary text-white ml-4" style="padding: 6px !important;">{{ $wall->wall_meter }}m</span>
                                        <div class="ml-auto" style="font-family: 'Gotham-Book';">
                                            <span class="badge {{ $wall->is_active == 0 ? 'badge-success' : 'badge-danger' }}" style="padding: 6px !important;">
                                                {{ $wall->is_active == 0 ? 'Active' : 'Inactive' }}
                                            </span>
                                        </div>
                                    </div>
                                    <!-- Second row: Description -- TO ADD WALL NAME -->
                                    <small style="color:#b2b2b2; font-family: 'Gotham-Book';">
                                        {{ $wall->wall_type }} - {{ $wall->wall_description }}
                                    </small>
                                </div>
                            </div>
                        </a>
                    </div>
                @empty
                    <div class="d-flex flex-column justify-content-center align-items-center" 
                         style="min-height: 40vh; margin-top: 2rem;">
                        <div class="mb-4">
                            <i class="fas fa-qrcode" style="font-size: 7rem; color: #b2b2b2;"></i>
                        </div>
                        <div class="text-center">
                            <p class="mb-2" style="font-family: 'Gotham-Book'; color: #b2b2b2;">
                                No walls registered yet
                            </p>
                        </div>
                    </div>
                @endforelse
            </div>
            @endif
        </div>
        
    </section>

</section>

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true" style="font-family: 'Gotham-Book';">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 550px;" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="modal-title" class="modal-title"style='font-family: "Gotham-Ultra'></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="form">
                    @csrf
                    <div class="form-group row">
                        <label for="" class="col-sm-3 col-form-label">Wall Serial Number<span class="text-danger">*</span></label>
                            <div class="col-sm-9">
                                <select  class="form-control" id="wall_serial_id" name="wall_serial_id" data-placeholder="Select Wall Serial" data-dropdown-css-class="select2-primary" style="width: 100%;">
                                </select> <!--No wall description yet -->
                            </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">Wall Type<span class="text-danger">*</span></label>
                        <div class="col-sm-9">
                            <select  class="form-control" id="wall_type" name="wall_type" data-placeholder="Select Wall Type" data-dropdown-css-class="select2-primary" style="width: 100%;">
                            </select> <!--No wall description yet -->
                        </div>
                    </div>
                    <input type="hidden" id="id" name="id">
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" id="registerWall" form="form" class="btn" style="background-color: #ffdd00; width:100%; border-radius: 10px;">Register Wall</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('javascript')
    <script>window.wallSalesSearchUrl = "{{ route('wall.sales.search') }}";</script>
    <script src="{{asset('js/wall-sales-report.js')}}"></script>
@endsection