@extends('layouts.app')



@section('title','REquirement')

@section("content")

<style>
.btn-sm {
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
}</style>
  <meta name="csrf-token" content="{{ csrf_token() }}">


<div class="container py-5">
<div class="card-header d-flex justify-content-between align-items-center">
    <h5 class="mb-0">Brand Requirement Form</h5>

    <button class="btn all-req-btn"
            data-bs-toggle="modal"
            data-bs-target="#allRequirementsModal">
        All Brand Requirements
    </button>
</div>



                <div class="card-body">

                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <form method="POST" action="/requirements">
                        @csrf

<div class="row mb-3 form-group-wrapper">

   

   <div class="col-lg-2 col-md-4">
    <label>Brand
        <span class="required">*</span>
    </label>
    <select name="brand_id"
            id="brand_id"
            class="form-select">
        <option value="">Select Brand</option>
        @foreach($brands as $brand)
            <option value="{{ $brand->id }}">
                {{ $brand->name }}
            </option>
        @endforeach
    </select>
</div>

<div class="col-lg-2 col-md-4">
    <label>Brand POC
    <span class="required">*</span>
    </label>

    <select name="brand_poc_id"
            id="brand_poc_id"
            class="form-select" required>
        <option value="">Select Brand First</option>
    </select>
</div>


    <div class="col-lg-2 col-md-4">
        <label>State
              <span class="required">*</span>
        </label>
        <select name="state_id" id="state_id" class="form-select" required></select>
    </div>

    <div class="col-lg-2 col-md-6">
        <label>City
         <span class="required">*</span>
        </label>
        <select name="city_id" id="city_id" class="form-select" required></select>
    </div>

    <div class="col-lg-2 col-md-6">
        <label>
        <span class="required">*</span>
        </label>
        <select name="market_id" id="market_id" class="form-select" required></select>
    </div>

</div>


<div class="row mb-3 form-group-wrapper">

    <div class="col-md-2">
        <label>Monthly Budget
    <span class="required">*</span>
        </label>
        <input name="budget" class="form-control" placeholder="1,50,000" required>
    </div>

    <div class="col-md-2">
        <label>Size Range
         <span class="required">*</span>
        </label>
        <input name="size_range" class="form-control" placeholder="1000 - 1500 Sq Ft" required>
    </div>

    <div class="col-md-2">
        <label>Type 
         <span class="required">*</span>
        </label>
        <select name="type" class="form-select" required>
            <option value="">Select</option>
            <option>Retail</option>
            <option>Showroom</option>
            <option>Warehouse</option>
            <option>Office</option>
        </select>
    </div>

    <div class="col-md-2">
        <label>Floor Preference 
      <span class="required">*</span>
        </label>
        <input name="floor_preference" class="form-control" placeholder="Ground / First" required>
    </div>

    <div class="col-md-2">
        <label>Timeline 
                  <span class="required">*</span>
        </label>
        <input name="timeline" class="form-control" placeholder="Immediate / 3 Months" required>
    </div>

    <div class="col-md-2">
        <label>Footage Required
          <span class="required">*</span>
        </label>
        <input name="footage" class="form-control" placeholder="Frontage" required>
    </div>

</div>


                        <div class="d-grid">
                            <button class="btn btn-primary btn-lg btn-req">
                                Save Requirement
                            </button>
                        </div>

                    </form>

                </div>
            </div>

        </div>
    </div>

</div>





<!-- ALL REQUIREMENTS MODAL -->
<div class="modal fade" id="allRequirementsModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">All Brand Requirements</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <table class="table table-bordered table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>SR.No.</th>
                            <th>Brand</th>
                            <th>POC</th>
                            <th>State</th>
                            <th>City</th>
                            <th>Market</th>
                            <th>Budget</th>
                            <th>Type</th>
                            <th width="200">Action</th>
                        </tr>
                    </thead>
                    <tbody id="requirementTable"></tbody>
                </table>
                <div id="requirementPagination"
     class="mt-3 d-flex justify-content-end"></div>

            </div>

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


<!-- VIEW MODAL -->
<div class="modal fade" id="viewModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">View Requirement</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="viewContent"></div>
        </div>
    </div>
</div>

<!-- EDIT MODAL -->
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">

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

            <div class="modal-body" id="editContent">
                <!-- AJAX CONTENT -->
            </div>

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


<script>
document.addEventListener('DOMContentLoaded', function () {

    const stateSelect  = document.getElementById('state_id');
    const citySelect   = document.getElementById('city_id');
    const marketSelect = document.getElementById('market_id');

    /* LOAD STATES */
    fetch('/states')
        .then(res => res.json())
        .then(data => {
            let options = '<option value="">Select State</option>';
            data.forEach(s => {
                options += `<option value="${s.id}">${s.name}</option>`;
            });
            stateSelect.innerHTML = options;
        });

    /* LOAD CITIES */
    stateSelect.addEventListener('change', function () {
        citySelect.innerHTML = '<option value="">Loading...</option>';
        marketSelect.innerHTML = '<option value="">Select Market</option>';

        if (!this.value) return;

        fetch(`/cities/${this.value}`)
            .then(res => res.json())
            .then(data => {
                let options = '<option value="">Select City</option>';
                data.forEach(c => {
                    options += `<option value="${c.id}">${c.name}</option>`;
                });
                citySelect.innerHTML = options;
            });
    });

    /* LOAD MARKETS */
    citySelect.addEventListener('change', function () {
        marketSelect.innerHTML = '<option value="">Loading...</option>';

        if (!this.value) return;

        fetch(`/markets/${this.value}`)
            .then(res => res.json())
            .then(data => {
                let options = '<option value="">Select Market</option>';
                data.forEach(m => {
                    options += `<option value="${m.id}">${m.name}</option>`;
                });
                marketSelect.innerHTML = options;
            });
    });

});
</script>
<script>
document.getElementById('allRequirementsModal')
    .addEventListener('shown.bs.modal', function () {
        loadRequirements();
});
</script>
<script>
function loadRequirements(page = 1)
{
    document.getElementById('requirementTable').innerHTML =
        `<tr><td colspan="9" class="text-center">Loading...</td></tr>`;

    document.getElementById('requirementPagination').innerHTML = '';

    fetch(`/requirements/list?page=${page}`, {
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(res => res.json())
    .then(res => {

        if(!res.data || res.data.length === 0){
            document.getElementById('requirementTable').innerHTML = `
                <tr>
                    <td colspan="9" class="text-center">
                        No records found
                    </td>
                </tr>`;
            return;
        }

        let rows = '';

        // 🔥 reverse numbering (latest = highest number)
        let start = res.total - ((res.current_page - 1) * res.per_page);

        res.data.forEach((r, index) => {
            rows += `
            <tr>
                <td>${start - index}</td>
                <td>${r.brand?.name ?? '-'}</td>
                <td>${r.poc?.name ?? '-'}</td>
                <td>${r.state?.name ?? '-'}</td>
                <td>${r.city?.name ?? '-'}</td>
                <td>${r.market?.name ?? '-'}</td>
                <td>${r.budget}</td>
                <td>${r.type}</td>
               <td class="text-nowrap">
    <button class="btn btn-info btn-sm me-1"
        onclick="viewRequirement(${r.id})">
        View
    </button>

    <button class="btn btn-warning btn-sm me-1"
        onclick="editRequirement(${r.id})">
        Edit
    </button>

    <button class="btn btn-danger btn-sm"
        onclick="deleteRequirement(${r.id})">
        Delete
    </button>
</td>

            </tr>`;
        });

        document.getElementById('requirementTable').innerHTML = rows;


        // ✅ PREV + NEXT pagination
let pagination = '<div class="btn-group">';

// PREV
pagination += `
<button class="btn btn-sm btn-outline-primary"
    ${res.current_page === 1 ? 'disabled' : ''}
    onclick="loadRequirements(${res.current_page - 1})">
    &laquo; Prev
</button>
`;

// PAGE NUMBERS (max 5)
let startPage = Math.max(1, res.current_page - 2);
let endPage   = Math.min(res.last_page, res.current_page + 2);

for(let i = startPage; i <= endPage; i++){
    pagination += `
    <button class="btn btn-sm ${res.current_page === i ? 'btn-primary' : 'btn-outline-primary'}"
        onclick="loadRequirements(${i})">
        ${i}
    </button>
    `;
}

// NEXT
pagination += `
<button class="btn btn-sm btn-outline-primary"
    ${res.current_page === res.last_page ? 'disabled' : ''}
    onclick="loadRequirements(${res.current_page + 1})">
    Next &raquo;
</button>
`;

pagination += '</div>';

document.getElementById('requirementPagination').innerHTML = pagination;

    })
    .catch(err => {
        console.error(err);
        alert('Failed to load requirements');
    });
}
</script>



<script>
function viewRequirement(id){
    fetch(`/requirements/${id}`, {
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(res => res.json())
    .then(r => {
        document.getElementById('viewContent').innerHTML = `
           <table class="table table-bordered text-center align-middle">

    <!-- ROW 1 -->
    <tr class="table-light fw-bold">
        <td>Brand</td>
        <td>POC</td>
        <td>State</td>
        <td>City</td>
        <td>Market</td>
    </tr>
    <tr>
        <td>${r.brand?.name ?? '-'}</td>
        <td>${r.poc?.name ?? '-'}</td>
        <td>${r.state?.name ?? '-'}</td>
        <td>${r.city?.name ?? '-'}</td>
        <td>${r.market?.name ?? '-'}</td>
    </tr>

    <!-- ROW 2 -->
    <tr class="table-light fw-bold">
        <td>Budget</td>
        <td>Type</td>
        <td>Size</td>
        <td>Floor</td>
        <td>Timeline</td>
    </tr>
    <tr>
        <td>${r.budget}</td>
        <td>${r.type}</td>
        <td>${r.size_range}</td>
        <td>${r.floor_preference}</td>
        <td>${r.timeline}</td>
    </tr>

    <!-- ROW 3 -->
    <tr class="table-light fw-bold">
        <td colspan="5">Footage</td>
    </tr>
    <tr>
        <td colspan="5">${r.footage}</td>
    </tr>

</table>

        `;

        new bootstrap.Modal(
            document.getElementById('viewModal')
        ).show();
    });
}
</script>

<script>
function editRequirement(id){

    fetch(`/requirements/${id}`, {
        headers:{
            'Accept':'application/json',
            'X-Requested-With':'XMLHttpRequest'
        }
    })
    .then(res => res.json())
    .then(r => {

        /* STEP 1️⃣ HTML inject */
        document.getElementById('editContent').innerHTML = `
<form id="editForm">
<div class="row g-3">

    <!-- BRAND -->
    <div class="col-md-3">
        <label>Brand
              <span class="required">*</span></label>
        <select class="form-select" name="brand_id" id="edit_brand_id">
            @foreach($brands as $brand)
                <option value="{{ $brand->id }}">{{ $brand->name }}</option>
            @endforeach
        </select>
    </div>

    <!-- BRAND POC -->
    <div class="col-md-3">
        <label>Brand POC
              <span class="required">*</span></label>
        <select class="form-select" name="brand_poc_id" id="edit_brand_poc_id">
            <option value="">Select Brand First</option>
        </select>
    </div>

    <!-- STATE -->
    <div class="col-md-3">
        <label>State
              <span class="required">*</span></label>
        <select class="form-select" name="state_id" id="edit_state_id"></select>
    </div>

    <!-- CITY -->
    <div class="col-md-3">
        <label>City
              <span class="required">*</span></label>
        <select class="form-select" name="city_id" id="edit_city_id"></select>
    </div>

    <!-- MARKET -->
    <div class="col-md-3">
        <label>Market
              <span class="required">*</span></label>
        <select class="form-select" name="market_id" id="edit_market_id"></select>
    </div>

    <!-- BUDGET -->
    <div class="col-md-3">
        <label>Budget
              <span class="required">*</span></label>
        <input class="form-control" name="budget" value="${r.budget}">
    </div>

    <!-- TYPE -->
    <div class="col-md-3">
        <label>Type
              <span class="required">*</span></label>
        <select class="form-select" name="type">
            <option ${r.type=='Retail'?'selected':''}>Retail</option>
            <option ${r.type=='Showroom'?'selected':''}>Showroom</option>
            <option ${r.type=='Warehouse'?'selected':''}>Warehouse</option>
            <option ${r.type=='Office'?'selected':''}>Office</option>
        </select>
    </div>

    <div class="col-md-3">
        <label>Size
              <span class="required">*</span></label>
        <input class="form-control" name="size_range" value="${r.size_range}">
    </div>

    <div class="col-md-3">
        <label>Floor
              <span class="required">*</span></label>
        <input class="form-control" name="floor_preference" value="${r.floor_preference}">
    </div>

    <div class="col-md-3">
        <label>Timeline
              <span class="required">*</span></label>
        <input class="form-control" name="timeline" value="${r.timeline}">
    </div>

    <div class="col-md-3">
        <label>Footage
              <span class="required">*</span></label>
        <input class="form-control" name="footage" value="${r.footage}">
    </div>
</div>

<button class="btn btn-primary w-100 mt-3">Update</button>
</form>
`;

        /* STEP 2️⃣ Elements  */
        const brandSel  = document.getElementById('edit_brand_id');
        const pocSel    = document.getElementById('edit_brand_poc_id');
        const stateSel  = document.getElementById('edit_state_id');
        const citySel   = document.getElementById('edit_city_id');
        const marketSel = document.getElementById('edit_market_id');

        /* STEP 3️⃣ BRAND + POC */
        brandSel.value = r.brand_id;

        fetch(`/brands/${r.brand_id}/pocs`)
        .then(res => res.json())
        .then(pocs => {
            let html = '<option value="">Select Brand POC</option>';
            pocs.forEach(p => {
                html += `<option value="${p.id}">${p.name}</option>`;
            });
            pocSel.innerHTML = html;
            pocSel.value = r.brand_poc_id;
        });

        brandSel.addEventListener('change', function(){
            fetch(`/brands/${this.value}/pocs`)
            .then(res => res.json())
            .then(pocs => {
                let html = '<option value="">Select Brand POC</option>';
                pocs.forEach(p => {
                    html += `<option value="${p.id}">${p.name}</option>`;
                });
                pocSel.innerHTML = html;
            });
        });

        /* STEP 4️⃣ STATE → CITY → MARKET */
        fetch('/states')
        .then(res => res.json())
        .then(states => {
            let html = '<option value="">Select State</option>';
            states.forEach(s => {
                html += `<option value="${s.id}">${s.name}</option>`;
            });
            stateSel.innerHTML = html;
            stateSel.value = r.state_id;
            loadCities(r.state_id);
        });

        function loadCities(stateId){
            fetch(`/cities/${stateId}`)
            .then(res => res.json())
            .then(cities => {
                let html = '<option value="">Select City</option>';
                cities.forEach(c => {
                    html += `<option value="${c.id}">${c.name}</option>`;
                });
                citySel.innerHTML = html;
                citySel.value = r.city_id;
                loadMarkets(r.city_id);
            });
        }

        function loadMarkets(cityId){
            fetch(`/markets/${cityId}`)
            .then(res => res.json())
            .then(markets => {
                let html = '<option value="">Select Market</option>';
                markets.forEach(m => {
                    html += `<option value="${m.id}">${m.name}</option>`;
                });
                marketSel.innerHTML = html;
                marketSel.value = r.market_id;
            });
        }

        stateSel.addEventListener('change', () => loadCities(stateSel.value));
        citySel.addEventListener('change', () => loadMarkets(citySel.value));

        /* STEP 5️⃣ Modal show */
        new bootstrap.Modal(document.getElementById('editModal')).show();

        /* STEP 6️⃣ Submit */
        document.getElementById('editForm').onsubmit = function(e){
            e.preventDefault();
            updateRequirement(id, new FormData(this));
        };
    });
}
</script>


<script>
document.addEventListener('DOMContentLoaded', function () {

    const brandSelect = document.getElementById('brand_id');
    const pocSelect   = document.getElementById('brand_poc_id');

    brandSelect.addEventListener('change', function () {

        const brandId = this.value;

        pocSelect.innerHTML = '<option>Loading...</option>';

        if (!brandId) {
            pocSelect.innerHTML = '<option>Select Brand First</option>';
            return;
        }

        fetch(`/brands/${brandId}/pocs`)
            .then(res => res.json())
            .then(data => {

                let html = '<option value="">Select Brand POC</option>';

                if (data.length === 0) {
                    html = '<option>No POC Found</option>';
                }

                data.forEach(poc => {
                    html += `<option value="${poc.id}">
                        ${poc.name}
                    </option>`;
                });

                pocSelect.innerHTML = html;
            })
            .catch(() => {
                pocSelect.innerHTML =
                    '<option>Error loading POC</option>';
            });
    });
});
</script>

<script>
function updateRequirement(id, formData){

    fetch(`/requirements/${id}/update`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN':
                document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(async res => {

        if (res.status === 422) {
            const data = await res.json();

            // 🔥 field-wise error show
            let messages = '';
            Object.values(data.errors).forEach(err => {
                messages += err[0] + '\n';
            });

            alert(messages);
            throw new Error('Validation failed');
        }

        return res.json();
    })
    .then(data => {
        if(data.success){
            loadRequirements();
            bootstrap.Modal
                .getInstance(document.getElementById('editModal'))
                .hide();
            alert(data.message);
        }
    })
    .catch(err => {
        console.error(err);
    });
}

</script>

<script>
function deleteRequirement(id){
    if(!confirm('Are you sure you want to delete this requirement?')){
        return;
    }

    fetch(`/requirements/${id}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN':
                document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        }
    })
    .then(res => {
        if(!res.ok){
            throw new Error('Delete request failed');
        }
        return res.json();
    })
    .then(data => {
        if(data.success){
            loadRequirements(); // reload table
        } else {
            alert('Delete failed');
        }
    })
    .catch(err => {
        console.error(err);
        alert('Delete error');
    });
}
</script>



@endsection