@extends('admin.layout.template')
@section('title', 'Project Details')
@section('content')
<style>
    #statusDropdownBtn {
        min-width: 260px;
        text-align: left;
        font-weight: 600;
    }

    .dropdown-menu {
        max-height: 300px;
        overflow-y: auto;
    }
</style>
<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABfBAX-v_a_99NqGylrBuo1mKPnZHx_Go&libraries=places,drawing,geometry&callback=initMap"
    async defer></script>
<div class="page-content">
    <div class="container-xxl">

        {{-- ================= PROJECT HEADER ================= --}}
        <div class="card mb-4 shadow-sm">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">

                    {{-- LEFT SIDE --}}
                    <div>
                        <h3 class="mb-2">
                            {{ $project->project_name }}
                            <span class="badge bg-info ms-2">
                                {{ $project->project_number }}
                            </span>
                        </h3>

                        <div class="row mt-3">
                            <div class="col-md-6">
                                <p class="mb-1">
                                    <strong>Customer :</strong>
                                    {{ $project->customer_name }}
                                </p>
                                <p class="mb-1">
                                    <strong>Phone :</strong>
                                    {{ $project->customer_phone }}
                                </p>
                                <p class="mb-1">
                                    <strong>Address :</strong>
                                    {{ $project->address }}
                                </p>
                            </div>

                            <div class="col-md-6">
                                <p class="mb-1">
                                    <strong>Project Type :</strong>
                                    {{ $project->project_type ?? '-' }}
                                </p>

                                <p class="mb-1">
                                    <strong>Expected Completion :</strong>
                                    {{ $project->expected_completion_date 
                                ? \Carbon\Carbon::parse($project->expected_completion_date)->format('d M Y') 
                                : '-' }}
                                </p>

                                <p class="mb-1">
                                    <strong>Status :</strong>
                                    <span class="badge 
                                @if($project->status == 'completed') bg-success
                                @elseif($project->status == 'pending') bg-warning
                                @else bg-secondary
                                @endif">
                                        {{ ucfirst($project->status) }}
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>

                    {{-- RIGHT SIDE --}}
                    <div class="text-end">

                        <p class="mb-1">
                            <strong>Employee :</strong>
                            {{ $project->employee_name ?? '-' }}
                        </p>

                        <p class="mb-1">
                            <strong>Contact :</strong>
                            {{ $project->employee_contact ?? '-' }}
                        </p>


                        @php
                        $creator = $project->creator;
                        $company = null;

                        if(in_array($creator->user_type,['architect_staff','dealer_staff'])){
                        $company = $creator->manager?->businessProfile;

                        }else{
                        $company = $creator->businessProfile;
                        }
                        @endphp
                        <p class="mb-1">
                            <strong>Created By :</strong>
                            {{ $creator->name ?? '-' }}
                            <span class="badge bg-secondary">
                                {{ $creator->role->name ?? '' }}
                            </span>
                        </p>

                        @if($company)



                        <p class="mb-1">
                            <strong>Company :</strong>
                            {{ $company->legal_shop_name ?? '-' }}
                            ,
                            <strong>Type :</strong>
                            {{ ucfirst($company->business_type ?? '-') }}
                            ,
                            <strong>Phone :</strong>
                            {{ $company->shop_mobile_number ?? '-' }}
                            ,
                            <strong>Address :</strong>
                            {{ $company->legal_shop_address ?? '-' }}
                        </p>

                        @endif
                        {{-- PDF Buttons --}}
                        <div class="d-flex justify-content-end align-items-center gap-2 flex-wrap">
                            <button class="btn btn-success" id="addToQuotation" data-project-id="{{ $project->id }}">
                                Add To Quotation
                            </button>
                            <div class="dropdown d-inline-block" id="statusWrapper">

                                <button class="btn btn-primary dropdown-toggle px-4"
                                    type="button"
                                    id="statusDropdownBtn"
                                    data-bs-toggle="dropdown"
                                    aria-expanded="false">

                                    <span id="currentStatusText">
                                        {{ ucwords(str_replace('_',' ',$project->status)) }}
                                    </span>

                                </button>

                                <ul class="dropdown-menu shadow">

                                    @php
                                    $statuses = [
                                    'submitted','new_lead','contacted','site_visit_scheduled','measuring_done',
                                    'quotation_sent','negotiation','approved','proforma_invoice_sent','advance_received',
                                    'production_started','quality_check_done','ready_for_installation',
                                    'installation_scheduled','installation_completed',
                                    'balance_payment_pending','balance_received',
                                    'completed_closed','feedback_collected'
                                    ];
                                    @endphp

                                    @foreach($statuses as $status)
                                    <li>
                                        <a class="dropdown-item status-change"
                                            href="#"
                                            data-status="{{ $status }}">
                                            {{ ucwords(str_replace('_',' ',$status)) }}
                                        </a>
                                    </li>
                                    @endforeach

                                </ul>
                            </div>
                            <button id="toggleLockBtn"
                                class="btn {{ $project->is_locked ? 'btn-danger' : 'btn-info' }}">
                                {{ $project->is_locked ? 'Unlock Project' : 'Lock Project' }}
                            </button>
                            {{-- Upload / Update --}}
                            <!-- <button class="btn btn-dark btn-sm px-3"
                                data-bs-toggle="modal"
                                data-bs-target="#quotationModal">
                                <i class="bi bi-upload"></i>
                                {{ $project->quotation_pdf ? 'Update Quotation' : 'Upload Quotation' }}
                            </button>

                            {{-- View Quotation (if exists) --}}
                            @if($project->quotation_pdf)
                            <a href="{{ asset($project->quotation_pdf) }}"
                                target="_blank"
                                class="btn btn-success btn-sm px-3">
                                <i class="bi bi-eye"></i> View
                            </a>
                            @endif

                            -->

                            {{-- More Actions Dropdown --}}
                            <div class="dropdown">
                                <button class="btn btn-outline-secondary btn-sm dropdown-toggle"
                                    data-bs-toggle="dropdown">
                                    More PDFs
                                </button>

                                <ul class="dropdown-menu dropdown-menu-end shadow">
                                    <li>
                                        <a class="dropdown-item"
                                            href="{{ url('/api/pdf/measurement/'.$project->id) }}"
                                            target="_blank">
                                            Measurement PDF
                                        </a>
                                    </li>


                                    <li>
                                        <a class="dropdown-item"
                                            href="{{ url('/api/pdf/quotation/'.$project->id) }}"
                                            target="_blank">
                                            Client Quotation
                                        </a>
                                    </li>
                                </ul>
                            </div>

                        </div>

                    </div>

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

        <div class="row mb-4">

            {{-- ================= PROJECT LOCATION ================= --}}
            <div class="col-md-4">
                <div class="card shadow-sm h-100">
                    <div class="card-header">
                        <h5 class="mb-0">Project Location</h5>
                    </div>

                    <div class="card-body p-2">
                        <div id="projectMap" style="width:100%; height:100%;"></div>
                    </div>
                </div>
            </div>


            {{-- ================= PROJECT SUMMARY ================= --}}
            <div class="col-md-8">

                <div class="row g-3">

                    <div class="col-md-4">
                        <div class="card text-center shadow-sm h-100">
                            <div class="card-body">
                                <h6 class="text-muted">Subtotal</h6>
                                <h4 class="text-primary">
                                    ₹ {{ number_format($project->subtotal, 2) }}
                                </h4>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card text-center shadow-sm h-100">
                            <div class="card-body">
                                <h6 class="text-muted">GST (18%)</h6>
                                <h4 class="text-warning">
                                    ₹ {{ number_format($project->tax, 2) }}
                                </h4>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card text-center shadow-sm h-100">
                            <div class="card-body">
                                <h6 class="text-muted">Grand Total</h6>
                                <h4 class="text-success">
                                    ₹ {{ number_format($project->grand_total, 2) }}
                                </h4>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="card text-center shadow-sm h-100">
                            <div class="card-body">
                                <h6 class="text-muted">Total Areas</h6>
                                <h4 class="text-info">
                                    {{ $project->areas->count() }}
                                </h4>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="card text-center shadow-sm h-100">
                            <div class="card-body">
                                <h6 class="text-muted">Total Items</h6>
                                <h4 class="text-primary">
                                    {{ $project->areas->sum(fn($area) => $area->items->count()) }}
                                </h4>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </div>


        {{-- ================= AREAS LOOP ================= --}}
        @foreach($project->areas as $area)

        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">
                    Area: {{ $area->name }}
                    @if($area->room)
                    <span class="text-muted">
                        (Room: {{ $area->room->name }})
                    </span>
                    @endif
                </h5>
            </div>

            <div class="card-body">

                @if($area->items->count() > 0)

                <div class="table-responsive" style="overflow-x: auto;">
                    <table class="table table-bordered table-sm" style="min-width:1200px;">

                        <thead class="table-light">
                            <tr>
                                <th width="4%">#</th>
                                <th width="8%">Image</th>
                                <th width="12%">Product</th>
                                <th width="5%">Type</th>
                                <th width="3%">Unit</th>
                                <th width="3%">Qty</th>
                                <th width="12%">Size</th>
                                <th width="5%">Room</th>
                                <th width="10%">Item</th>
                                <th width="12%">Catalog</th>
                                <th width="8%">Serial</th>
                                <th width="30%">Details</th>
                                <th width="20%">Description</th>
                            </tr>
                        </thead>


                        <tbody>
                            @foreach($area->items as $index => $item)

                            @php
                            $unit = 'Nos';
                            $qty = 1;

                            // ===============================
                            // NON CUSTOM
                            // ===============================
                            if($item->is_custom == 0){

                            $qty = (float) ($item->quantity ?? 1);

                            if($item->category == 'curtain'){
                            $unit = 'Pcs';
                            }
                            elseif($item->category == 'wallpaper'){
                            $unit = 'Rolls';
                            }

                            }
                            // ===============================
                            // CUSTOM CURTAIN
                            // ===============================
                            elseif($item->category == 'curtain' && $item->curtain && $item->measurement){

                            $fw = (float) $item->curtain->fabric_width;
                            $ww = (float) $item->measurement->width;
                            $wh = (float) $item->measurement->height;

                            if($fw > 0){
                            $panels = ceil($ww / $fw);
                            $qty = $panels * $wh;
                            }

                            $unit = 'Meter';
                            }
                            // ===============================
                            // CUSTOM WALLPAPER
                            // ===============================
                            elseif($item->category == 'wallpaper' && $item->wallpaper){

                            $rw = (float) $item->wallpaper->roll_width;
                            $rl = (float) $item->wallpaper->roll_length;
                            $ww = (float) $item->wallpaper->wall_width;
                            $wh = (float) $item->wallpaper->wall_height;
                            $rep = (float) ($item->wallpaper->design_repeat ?? 0);

                            if($rw > 0 && $rl > 0){
                            $cuttings = ceil($ww / $rw);
                            $totalLength = $cuttings * ($wh + $rep);
                            $qty = ceil($totalLength / $rl);
                            }

                            $unit = 'Rolls';
                            }
                            @endphp

                            <tr>

                                {{-- SL --}}
                                <td>{{ $index + 1 }}</td>

                                {{-- IMAGE --}}
                                <td>
                                    @if($item->is_custom == 0 && $item->variant?->primaryImage?->image_path)
                                    <img src="{{ asset($item->variant->primaryImage->image_path) }}" width="60">
                                    @else
                                    <span class="text-muted">Custom</span>
                                    @endif
                                </td>

                                {{-- PRODUCT --}}
                                <td>
                                    {{ $item->product->name ?? 'Custom Item' }}
                                </td>

                                {{-- TYPE (is_custom badge) --}}
                                <td>
                                    @if($item->is_custom == 1)
                                    <span class="badge bg-warning text-dark">Custom</span>
                                    @else
                                    <span class="badge bg-success">Standard</span>
                                    @endif
                                </td>

                                {{-- UNIT --}}
                                <td>{{ $unit }}</td>

                                {{-- QTY --}}
                                <td>{{ $qty > 0 ? number_format($qty,2) : '-' }}</td>

                                {{-- SIZE --}}
                                <td>
                                    @if($item->measurement)
                                    {{ $item->measurement->width ?? '-' }}
                                    x
                                    {{ $item->measurement->height ?? '-' }}
                                    {{ $item->measurement->unit ?? '' }}
                                    @else
                                    -
                                    @endif
                                </td>

                                {{-- ROOM --}}
                                <td>{{ $area->area_name ?? $area->name ?? '-' }}</td>

                                {{-- CATEGORY --}}
                                <td>
                                    {{-- CURTAIN --}}
                                    @if($item->category == 'curtain' && $item->curtain)

                                    {{
            $item->curtain->productModel->name 
            ?? $item->curtain->custom_model_name 
            ?? 'Curtain'
        }}

                                    {{-- WALLPAPER --}}
                                    @elseif($item->category == 'wallpaper' && $item->wallpaper)

                                    {{
            $item->wallpaper->catalogue 
            ?? 'Wallpaper'
        }}

                                    {{-- MATTRESS --}}
                                    @elseif($item->category == 'mattress' && $item->mattress)

                                    {{ $item->mattress->type ?? 'Mattress' }}

                                    {{-- DEFAULT --}}
                                    @else
                                    {{ ucfirst($item->category ?? '-') }}
                                    @endif
                                </td>

                                {{-- CATALOG --}}
                                <td>
                                    {{
            $item->curtain->catalogue ??
            $item->wallpaper->catalogue ??
            '-'
        }}
       
  @if($item->category == 'fabric')
        {{ $item->product->master_catalogue_name ?? '-' }}
        @endif

                                </td>

                                {{-- SERIAL --}}
                                <td>
                                    {{
            $item->curtain->serial_no ??
            $item->wallpaper->serial_no ??
            '-'
        }}
         @if($item->category == 'fabric')
        {{ $item->variant->sku ?? '-' }}
        @endif
                                </td>
                                <td>
                                    @if($item->category == 'curtain' && $item->curtain)

                                    <strong>Brand:</strong> {{ $item->curtain->brand ?? '-' }} <br>
                                    <strong>Catalog:</strong> {{ $item->curtain->catalogue ?? '-' }} <br>
                                    <strong>Serial:</strong> {{ $item->curtain->serial_no ?? '-' }} <br>

                                    @if($item->is_custom)
                                    <strong>Fabric Width:</strong> {{ $item->curtain->fabric_width ?? '-' }} <br>
                                    <strong>Rate:</strong> {{ $item->curtain->price_per_meter ?? '-' }}
                                    @endif

                                    @elseif($item->category == 'wallpaper' && $item->wallpaper)

                                    <strong>Brand:</strong> {{ $item->wallpaper->brand ?? '-' }} <br>
                                    <strong>Roll Size:</strong>
                                    {{ $item->wallpaper->roll_width ?? '-' }}
                                    x
                                    {{ $item->wallpaper->roll_length ?? '-' }}

                                    @else
                                    {{ $item->notes ?? '-' }}
                                    @endif
                                </td>
                                {{-- DESCRIPTION --}}
                                <td>{{ $item->notes ?? '-' }}</td>

                            </tr>

                            @endforeach

                        </tbody>
                    </table>
                </div>


                @else
                <p class="text-muted">No items found in this area.</p>
                @endif

            </div>
        </div>

        @endforeach

        <div class="card mt-4">
            <div class="card-header">
                <strong>Status History</strong>
            </div>
            <div class="card-body p-0">

                <table class="table table-bordered mb-0">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Changed By</th>
                            <th>Old Status</th>
                            <th>New Status</th>
                            <th>Remarks</th>
                        </tr>
                    </thead>
                    <tbody>

                        @forelse($project->statusHistories as $history)
                        <tr>
                            <td>{{ $history->created_at->format('d M Y h:i A') }}</td>
                            <td>{{ $history->user->name }}</td>
                            <td>{{ ucwords(str_replace('_',' ',$history->old_status)) }}</td>
                            <td>{{ ucwords(str_replace('_',' ',$history->new_status)) }}</td>
                            <td>{{ $history->remarks ?? '-' }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center">No history found</td>
                        </tr>
                        @endforelse

                    </tbody>
                </table>

            </div>
        </div>
        <a href="{{ route('projects.index') }}" class="btn btn-secondary mt-3">Back to Projects</a>

    </div>
</div>

<!-- Quotation Upload Modal -->
<div class="modal fade" id="quotationModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">

            <form action="{{ route('projects.upload.quotation', $project->id) }}"
                method="POST"
                enctype="multipart/form-data">

                @csrf

                <div class="modal-header">
                    <h5 class="modal-title">
                        {{ $project->quotation_pdf ? 'Update' : 'Upload' }} Quotation PDF
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <div class="mb-3">
                        <label class="form-label">Select PDF File</label>
                        <input type="file"
                            name="quotation_pdf"
                            class="form-control"
                            accept="application/pdf"
                            required>
                        <small class="text-muted">
                            Max size: 4MB
                        </small>
                    </div>

                    @if($project->quotation_pdf)
                    <p>
                        Current File:
                        <a href="{{ asset($project->quotation_pdf) }}"
                            target="_blank">
                            View PDF
                        </a>
                    </p>
                    @endif

                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">
                        {{ $project->quotation_pdf ? 'Update' : 'Upload' }}
                    </button>
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">
                        Cancel
                    </button>
                </div>

            </form>

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



<div class="modal fade" id="editProjectModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <form id="editProjectForm">
                @csrf
                <input type="hidden" name="project_id" value="{{ $project->id }}">


                <div class="modal-header">
                    <h5 class="modal-title">Edit Project</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <div class="row">

                        <div class="col-md-6 mb-3">
                            <label>Project Name</label>
                            <input type="text" name="project_name"
                                class="form-control"
                                value="{{ $project->project_name }}" required>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Project Type</label>
                            <input type="text" name="project_type"
                                class="form-control"
                                value="{{ $project->project_type }}">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Customer Name</label>
                            <input type="text" name="customer_name"
                                class="form-control"
                                value="{{ $project->customer_name }}" required>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Customer Phone</label>
                            <input type="text" name="customer_phone"
                                class="form-control"
                                value="{{ $project->customer_phone }}">
                        </div>

                        <div class="col-md-12 mb-3">
                            <label>Address</label>
                            <textarea name="address"
                                class="form-control"
                                rows="2">{{ $project->address }}</textarea>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Expected Completion</label>
                            <input type="date" name="expected_completion_date"
                                class="form-control"
                                value="{{ $project->expected_completion_date }}">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Status</label>
                            <select name="status" class="form-select" required>
                                @php
                                $statuses = ['new','measuring','quoted','approved','production','completed'];
                                @endphp

                                @foreach($statuses as $status)
                                <option value="{{ $status }}"
                                    {{ $project->status == $status ? 'selected' : '' }}>
                                    {{ ucfirst($status) }}
                                </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Employee Name</label>
                            <input type="text" name="employee_name"
                                class="form-control"
                                value="{{ $project->employee_name }}">
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Employee Contact</label>
                            <input type="text" name="employee_contact"
                                class="form-control"
                                value="{{ $project->employee_contact }}">
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Total Amount</label>
                            <input type="number" step="0.01"
                                name="total_amount"
                                class="form-control"
                                value="{{ $project->total_amount }}">
                        </div>

                    </div>

                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Update Project</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>

            </form>

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


<div class="modal fade" id="editItemModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">

            <form id="editItemForm">
                @csrf
                <input type="hidden" name="project_item_id" id="edit_project_item_id">

                <div class="modal-header">
                    <h5>Edit Item</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <div class="row">

                        {{-- CATEGORY --}}
                        <div class="col-md-3 mb-3">
                            <label>Category</label>
                            <select name="category" id="edit_category" class="form-select">
                                <option value="">Select</option>
                                <option value="curtain">Curtain</option>
                                <option value="mattress">Mattress</option>
                                <option value="sofa">Sofa</option>
                                <option value="wallpaper">Wallpaper</option>
                                <option value="fabric">Fabric</option>
                                <option value="accessories">Accessories</option>
                            </select>
                        </div>

                        {{-- SUBCATEGORY --}}
                        <div class="col-md-3 mb-3">
                            <label>Subcategory</label>
                            <select name="subcategory_id" id="edit_subcategory" class="form-select"></select>
                        </div>

                        {{-- CATALOGUE --}}
                        <div class="col-md-3 mb-3">
                            <label>Catalogue</label>
                            <select name="product_id" id="edit_catalogue" class="form-select"></select>
                        </div>

                        {{-- SKU --}}
                        <div class="col-md-3 mb-3">
                            <label>SKU</label>
                            <select name="variant_id" id="edit_sku" class="form-select"></select>
                        </div>

                    </div>

                    <hr>

                    {{-- ================= CURTAIN FIELDS ================= --}}
                    <div id="curtain_section" class="category_section d-none">
                        <div class="row">

                            <div class="col-md-3">
                                <label>Width</label>
                                <input type="number" name="measurement[width]" class="form-control">
                            </div>

                            <div class="col-md-3">
                                <label>Height</label>
                                <input type="number" name="measurement[height]" class="form-control">
                            </div>

                            <div class="col-md-2">
                                <label>Unit</label>
                                <select name="measurement[unit]" class="form-select">
                                    <option value="cm">CM</option>
                                    <option value="inch">Inch</option>
                                </select>
                            </div>

                            <div class="col-md-2">
                                <label>Motorized</label>
                                <select name="details[motorized]" class="form-select">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>

                            <div class="col-md-3">
                                <label>Model</label>
                                <select name="details[model]" id="edit_model" class="form-select"></select>
                            </div>

                            <div class="col-md-3">
                                <label>Catalogue</label>
                                <input type="text" name="details[catalogue]" class="form-control">
                            </div>

                            <div class="col-md-3">
                                <label>Serial No</label>
                                <input type="text" name="details[serial_no]" class="form-control">
                            </div>

                        </div>
                    </div>

                    {{-- ================= MATTRESS SECTION ================= --}}
                    <div id="mattress_section" class="category_section d-none">
                        <div class="row">

                            <div class="col-md-3">
                                <label>Type</label>
                                <select name="details[type]" id="mattress_type" class="form-select"></select>
                            </div>

                            <div class="col-md-3">
                                <label>Thickness</label>
                                <select name="details[thickness]" id="mattress_thickness" class="form-select"></select>
                            </div>

                            <div class="col-md-3">
                                <label>Size</label>
                                <select name="details[size]" id="mattress_size" class="form-select"></select>
                            </div>

                            <div class="col-md-2">
                                <label>Unit</label>
                                <select name="details[unit]" class="form-select">
                                    <option value="inch">Inch</option>
                                    <option value="ft">Ft</option>
                                    <option value="cm">CM</option>
                                </select>
                            </div>

                        </div>
                    </div>

                    {{-- ================= WALLPAPER SECTION ================= --}}
                    <div id="wallpaper_section" class="category_section d-none">
                        <div class="row">

                            <div class="col-md-3">
                                <label>Wall Width</label>
                                <input type="number" name="measurement[width]" class="form-control">
                            </div>

                            <div class="col-md-3">
                                <label>Wall Height</label>
                                <input type="number" name="measurement[height]" class="form-control">
                            </div>

                            <div class="col-md-3">
                                <label>Roll Qty</label>
                                <input type="number" name="details[roll_quantity]" class="form-control">
                            </div>

                            <div class="col-md-3">
                                <label>Catalogue</label>
                                <input type="text" name="details[catalogue]" class="form-control">
                            </div>

                            <div class="col-md-3">
                                <label>Serial</label>
                                <input type="text" name="details[serial_no]" class="form-control">
                            </div>

                        </div>
                    </div>

                    {{-- COMMON --}}
                    <div class="row mt-3">
                        <div class="col-md-2">
                            <label>Quantity</label>
                            <input type="number" name="quantity" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label>Note</label>
                            <input type="text" name="note" class="form-control">
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Update Item</button>
                </div>

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

<script>
    $('#addToQuotation').click(function() {

        let projectId = $(this).data('project-id');

        Swal.fire({
            title: 'Are you sure?',
            text: "This will generate quotation from project items.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, Generate!',
            cancelButtonText: 'Cancel'
        }).then((result) => {

            if (result.isConfirmed) {

                $.ajax({
                    url: "{{ url('admin/projects/add-to-quotation') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        project_id: projectId
                    },
                    success: function(response) {

                        if (response.success) {
                            Swal.fire('Success!', response.message, 'success')
                                .then(() => {
                                    location.reload();
                                });
                        } else {
                            Swal.fire('Error!', response.message, 'error');
                        }

                    },
                    error: function() {
                        Swal.fire('Error!', 'Something went wrong', 'error');
                    }
                });

            }
        });
    });

    let projectId = {
        {
            $project - > id
        }
    };



    let changeStatusUrl = "{{ route('projects.changeStatus', $project->id) }}";

    $('.status-change').click(function(e) {
        e.preventDefault();

        let newStatus = $(this).data('status');

        Swal.fire({
            title: 'Change Status?',
            text: "Do you want to update project status?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, Update'
        }).then((result) => {

            if (result.isConfirmed) {

                $.ajax({
                    url: changeStatusUrl,
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        status: newStatus
                    },
                    success: function(response) {

                        Swal.fire(
                            'Updated!',
                            response.message,
                            'success'
                        );

                        $('#currentStatusText').text(
                            newStatus.replace(/_/g, ' ')
                            .replace(/\b\w/g, l => l.toUpperCase())
                        );
                        location.reload();
                    }
                });

            }

        });
    });
</script>

<script>
    let toggleLockUrl = "{{ route('projects.toggleLock', $project->id) }}";

    $('#toggleLockBtn').click(function() {

        Swal.fire({
            title: 'Are you sure?',
            text: "You want to change lock status?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, Continue'
        }).then((result) => {

            if (result.isConfirmed) {

                $.ajax({
                    url: toggleLockUrl,
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {

                        Swal.fire(
                            'Updated!',
                            response.message,
                            'success'
                        ).then(() => {
                            location.reload();
                        });

                    }
                });

            }

        });

    });

    function initMap() {

        let lat = {
            {
       $project - > location_lat ?? 0
            }
        };
        let lng = {
            {
                $project - > location_lng ?? 0
            }
        };

        if (lat == 0 || lng == 0) {
            document.getElementById('projectMap').innerHTML =
                '<div class="text-center text-muted p-5">Location not available</div>';
            return;
        }

        const location = {
            lat: parseFloat(lat),
            lng: parseFloat(lng)
        };

        const map = new google.maps.Map(document.getElementById("projectMap"), {
            zoom: 14,
            center: location,
        });

        new google.maps.Marker({
            position: location,
            map: map,
            title: "Project Location"
        });
    }
</script>
@endsection