@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 Information</h1>
                    @include('wall-sales.wall-search')
                </div>
            </div>
            <div class="d-flex align-items-center">
                <div>
                    @if(!empty($wall->qr_code) && file_exists(public_path($wall->qr_code)))
                        <img id="qr_code" src="{{ asset($wall->qr_code) }}"style="width: 100px; height: 100px;" alt="QR Code">
                    @else
                        <i class="fas fa-qrcode d-flex align-items-center justify-content-center" style="width: 100px; height: 100px; font-size: 5rem; color:#555; border-radius: 6px; text-align:center; line-height:100px;"></i>
                    @endif
                </div>
                <div class="ml-3">
                    <small class="text-muted mb-2" style="font-family:'Gotham-Book';">Wall Serial Number:</small>
                    <h4 id="wall_serial" style="font-family:'Gotham-Bold'; margin-bottom: 10px;">
                        {{ $wall->wall_serial }}
                    </h4>
                    <div class="d-flex" style="gap: 10px; font-family:'Gotham-Book';">                        
                        <small class="badge {{ $isSubmitted || $wall->product_count > 0 ? 'badge-success' : 'badge-primary' }} text-white"><i class="fa fa-barcode"></i> Scanned</small>
                        <small class="badge {{ $isSubmitted ? 'badge-success' : 'badge-primary' }} text-white"><i class="fas fa-upload"></i> Submitted</small>
                    </div>
                </div>
            </div>
            <div class="mt-1 pr-2 pl-2">
                <div class="d-flex justify-content-center">
                    <div class="card pt-3 pl-3 pr-3 pb-1 mb-1 w-100 border" 
                        style="flex-shrink:0;border-radius: 10px;background-color:#f8f8f8; box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15); font-family: 'Gotham-Book';">
                        <div class="card-title d-flex justify-content-between">
                            <p><b style="font-family: 'Gotham-Book';">Specifications</b></p>
                            @if ($role == 2)
                            <button class="btn btn-sm btn-secondary py-0" onclick="editWallModal()" style="height: 30px;">
                                <i class="fas fa-pencil-alt"></i>
                            </button>
                            @endif
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-2">
                                    <i class="fas fa-hashtag mt-3 ml-2 fa-2x"></i>
                                </div>
                                <div class="col-10">
                                    <small class="text-muted">Wall Code:</small>
                                    <p class="text-bold">{{ $wall->wall_code }}</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-2">
                                    <i class="fas fa-border-all mt-3 ml-2 fa-2x"></i>
                                </div>
                                <div class="col-10">
                                    <small class="text-muted">Wall Type:</small>
                                    <p class="text-bold">{{ $wall->wall_description }}</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-2">
                                    <i class="fas fa-ruler mt-3 ml-2 fa-2x"></i>
                                </div>
                                <div class="col-10">
                                    <small class="text-muted">Wall Meter:</small>
                                    <p class="text-bold">{{ $wall->wall_meter }}m</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-center">
                <div class="d-flex flex-column p-2 pb-3 w-100">
                        {{-- ✅ CASE 1: Submitted (read-only) --}}
                        @if($isSubmitted)
                            <div class="card p-3 w-100 border" style="flex-shrink:0;border-radius: 10px;background-color:#f8f8f8; box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15); font-family: 'Gotham-Book';">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-2 mt-1">
                                            <i class="fa fa-check-circle mt-2 ml-2 fa-2x"></i>
                                        </div>
                                        <div class="col-10">
                                            This wall scan has been submitted and is now read-only.
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" 
                                id="scanned_product" 
                                data-wall="{{ $wall->id }}" 
                                onclick="scannedProduct()" 
                                class="btn btn-primary btn-block p-3" 
                                style="font-family: 'Gotham-Book'; border-radius:10px;">
                                <i class="fa fa-eye mr-2"></i> View Scanned Products
                            </button>
                        @elseif($wall->products != null || $wall->product_count > 0)
                            <button type="button" 
                                id="scanned_product" 
                                data-wall="{{ $wall->id }}" 
                                onclick="scannedProduct()" 
                                class="btn btn-primary btn-block p-3" 
                                style="font-family: 'Gotham-Book'; border-radius:10px;">
                                <i class="fa fa-eye mr-2"></i> View Scanned Products
                            </button>
                        @else
                            <button type="button" 
                                id="scan_product" 
                                data-wall="{{ $wall->id }}" 
                                onclick="scanProduct()" 
                                class="btn btn-primary btn-block p-3 {{ $wall->is_active == 1 ? 'disabled' : '' }}" 
                                style="font-family: 'Gotham-Book'; border-radius:10px; {{ $wall->is_active == 1 ? 'opacity:0.6; cursor:not-allowed;' : '' }}" 
                                {{ $wall->is_active == 1 ? 'disabled' : '' }}>
                                <i class="fas {{ $wall->is_active == 1 ? 'fa-lock' : 'fa-plus' }} mr-2"></i>
                                Add Products to Wall
                            </button>
                        @endif
                </div>
            </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 d-flex flex-column align-items-center p-3">
                <div class="w-100 text-left mb-2 ml-4">
                    <small class="text-muted" style="font-family:'Gotham-Book';">Available Actions</small>
                </div>
                <form id="form">
                    @csrf
                    @if($wall->is_active == 1)
                    <button type="button" 
                            class="btn btn-outline-info btn-block mb-3 text-left p-3"
                            style="border-radius: 10px;" 
                             onclick="$('#replaceWallModal').modal('show')">
                        <div>
                            <p style="font-size: 1.0rem; margin-bottom: 0.5rem; font-family: 'Gotham-Book';">
                                <b>Replace Wall</b>
                            </p>
                            <p style="font-size: 0.8rem; color: #b2b2b2; margin: 0;">
                                Replace this wall with a new serial number.
                            </p>
                        </div>
                    </button>
                    @else
                    <button type="button" 
                            class="btn btn-outline-info btn-block mb-3 text-left p-3"
                            style="border-radius: 10px; opacity:0.5; cursor:not-allowed;">
                        <div>
                            <p style="font-size: 1.0rem; margin-bottom: 0.5rem; font-family: 'Gotham-Book';">
                                <b>Replace Wall</b>
                            </p>
                            <p style="font-size: 0.8rem; color: #b2b2b2; margin: 0;">
                                Replace this wall with a new serial number.
                            </p>
                        </div>
                    </button>
                    @endif
                    @if($wall->is_active == 0)
                        <button type="button"
                                class="btn btn-outline-warning btn-block mb-3 text-left p-3"
                                style="border-radius: 10px;"
                                onclick="disableWall('{{ $wall->wall_serial_id }}')">
                            <div>
                                <p style="font-size: 1.0rem; margin-bottom: 0.5rem; font-family: 'Gotham-Book';">
                                    <b>Disable Wall</b>
                                </p>
                                <p style="font-size: 0.8rem; color: #b2b2b2; margin: 0;">
                                    Set this wall as inactive.
                                </p>
                            </div>
                        </button>
                    @else
                        <button type="button"
                            class="btn btn-outline-warning btn-block mb-3 text-left p-3"
                            style="border-radius: 10px;"
                            onclick="enableWall('{{ $wall->wall_serial_id }}')">
                            <div>
                                <p style="font-size: 1.0rem; margin-bottom: 0.5rem; font-family: 'Gotham-Book';">
                                    <b>Enable Wall</b>
                                </p>
                                <p style="font-size: 0.8rem; color: #b2b2b2; margin: 0;">
                                    Set this wall as active.
                                </p>
                            </div>
                        </button>
                    @endif
                    {{-- @if($wall->products->count() == 0) --}}
                    @if($wall->product_count == 0)
                        <button type="button"
                            class="btn btn-outline-danger btn-block text-left p-3"
                            style="border-radius: 10px;"
                            onclick="unregisterWall('{{ $wall->wall_serial_id }}')">
                        <div>
                            <p style="font-size: 1.0rem; margin-bottom: 0.5rem; font-family: 'Gotham-Book';">
                                <b>Unregister Wall</b>
                            </p>
                            <p style="font-size: 0.8rem; color: #b2b2b2; margin: 0;">
                                Click to unregister this wall.
                            </p>
                        </div>
                    </button>
                    @else
                        <button type="button"
                                class="btn btn-outline-danger btn-block text-left p-3"
                                style="border-radius: 10px; opacity:0.5; cursor:not-allowed;"
                                disabled>
                            <div>
                                <p style="font-size: 1.0rem; margin-bottom: 0.5rem; font-family: 'Gotham-Book';">
                                    <b>Unregister Wall</b>
                                </p>
                                <p style="font-size: 0.8rem; color: #6c757d; margin: 0;">
                                    Cannot unregister – wall has scan history.
                                </p>
                            </div>
                        </button>
                    @endif
                </form>
            </div>

        </div>
    </div>
</div>

<!-- Replace Wall Modal -->
<div class="modal fade" id="replaceWallModal" tabindex="-1" role="dialog" aria-hidden="true" style="font-family: 'Gotham-Book';">
  <div class="modal-dialog modal-dialog-centered" style="max-width: 500px; margin-left: 20px; margin-right: 20px;" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <form id="replacewall-form">
          @csrf
          <input type="hidden" id="wallSerial" name="wallSerial" value="{{ $wall->wall_serial }}">

          <div class="form-group">
            <label for="newWallSerial">New Wall Serial</label>
                <select id="newWallSerial" class="form-control" style="width: 100%;">
                    <option value="">Select New Wall Serial</option>
                </select>
                <input type='hidden' value="{{ $wall->id}}" id="wallId">
          </div>

          <div class="form-group mt-3">
            <button type="submit" class="btn btn-block w-100" style="background-color: #ffdd00;">
              Replace Wall
            </button>
          </div>
          <label class="mt-2 mb-0" id="replaceWallResult" style="color: red; display: none;"></label>
        </form>
      </div>
    </div>
  </div>
</div>


@endsection

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