@extends('app-new')

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <div>
                <h2 class="content-header-title float-start mb-0">Create Requirement</h2>
                <div class="breadcrumb-wrapper">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('requirements.index') }}">Requirements</a></li>
                        <li class="breadcrumb-item active">Create</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('requirements.store') }}"
                              method="POST"
                              class="row g-3 needs-validation form-parsley"
                              enctype="multipart/form-data">
                            @csrf

                            <div class="row g-2">
                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <input name="reqname" type="text"
                                               class="form-control @error('reqname') is-invalid @enderror"
                                               id="reqname" placeholder="Requirement Name"
                                               value="{{ old('reqname') }}" >
                                        <label for="reqname">Requirement Name</label>
                                        @error('reqname')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <input name="reqdscr" type="text"
                                               class="form-control @error('reqdscr') is-invalid @enderror"
                                               id="reqdscr" placeholder="Requirement Description"
                                               value="{{ old('reqdscr') }}" >
                                               @error('reqdscr')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        <label for="reqdscr">Requirement Description</label>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <select id="reqprojectlist"
                                                name="projectlist"
                                                class="form-select">
                                            <option selected disabled>Select Project</option>
                                            @foreach($projects as $project)
                                                <option value="{{ $project['id'] }}">
                                                    {{$project['project_code']}} - {{ $project['project_name'] }}
                                                </option>
                                            @endforeach
                                        </select>
                                        {{-- <label>Project</label> --}}
                                    </div>
                                </div>

                                <div class="col-md-4 mt-4">
                                    <div class="form-floating">
                                        <select id="reqstatus" name="reqstatus" class="form-select">
                                            <option selected disabled>Select Status</option>
                                            <option value="open">Open</option>
                                            <option value="closed">Closed</option>
                                        </select>
                                        <label for="reqstatus">Select Requirement Status</label>
                                    </div>
                                </div>

                                <div class="col-md-4 mt-4">
                                    <div class="form-floating">
                                        <select id="vendor_category"
                                                name="vendorcategorylist"
                                                class="form-select">
                                            <option selected disabled>Select Category</option>
                                            @foreach($vendorCategories as $category)
                                                <option value="{{ $category['id'] }}">
                                                    {{ $category['name'] }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <label>Category</label>
                                    </div>
                                </div>

                                <div class="col-md-4 mt-4">
                                    <div class="form-floating">
                                        <input name="selectreqdate" type="text"
                                               id="mdate"
                                               class="form-control @error('selectreqdate') is-invalid @enderror"
                                               placeholder="Select Date" >
                                        <label>Select Bidding Last Date</label>
                                        @error('selectreqdate')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="mb-3 row" id="subcategory-container"></div>
                                <div class="mb-3 row" id="vendor-container"></div>

                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <input type="file" name="reqdetailsfile"
                                               class="form-control">
                                        <label>Upload Requirement Details File</label>
                                    </div>
                                </div>

                            </div>

                            <div class="col-md pt-2">
                                <button type="submit" class="btn btn-primary">
                                    Submit
                                </button>
                            </div>

                        </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer-script') 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            flatpickr("#mdate", {
                dateFormat: "Y-m-d",
                minDate: "today",
                allowInput: false
            });
        });
    $(document).ready(function () {

        /* ===============================
        CATEGORY → SUBCATEGORIES (RADIO)
        ================================*/
        $('#vendor_category').on('change', function () {

            let categoryId = $(this).val();
            let subcatContainer = $('#subcategory-container');
            let vendorContainer = $('#vendor-container');

            subcatContainer.html('');
            vendorContainer.html('');

            if (!categoryId) return;

            $.ajax({
                url: "{{ route('vendor.fetch-subcategories', '') }}/" + categoryId,
                type: "GET",
                success: function (data) {

                    if (data.length > 0) {

                        subcatContainer.append(`
                            <div class="col-md-12 my-2">
                                <label class="form-label fw-bold">Sub Category</label>
                            </div>
                        `);

                        $.each(data, function (index, subcat) {

                            subcatContainer.append(`
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input subcat-radio"
                                            type="radio"
                                            name="subcategory_id"
                                            value="${subcat.id}"
                                            id="subcat_${subcat.id}">
                                        <label class="form-check-label"
                                            for="subcat_${subcat.id}">
                                            ${subcat.name}
                                        </label>
                                    </div>
                                </div>
                            `);
                        });
                    }
                }
            });
        });

        /* ===============================
        SUBCATEGORY → VENDORS
        ================================*/
        $(document).on('change', '.subcat-radio', function () {

            let categoryId = $('#vendor_category').val();
            let subCategoryId = $(this).val();
            let vendorContainer = $('#vendor-container');

            vendorContainer.html('');

            if (!categoryId || !subCategoryId) return;

            $.ajax({
                url: "{{ route('requirements.fetch-vendors') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    category_id: categoryId,
                    subcategory_id: subCategoryId
                },
                success: function (data) {

                    if (data.length > 0) {

                        vendorContainer.append(`
                            <div class="col-md-12 my-2">
                                <label class="form-label fw-bold">Vendors</label>
                            </div>
                        `);

                        $.each(data, function (index, vendor) {

                            vendorContainer.append(`
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input"
                                            type="checkbox"
                                            name="vendors[]"
                                            value="${vendor.id}"
                                            id="vendor_${vendor.id}">
                                        <label class="form-check-label"
                                            for="vendor_${vendor.id}">
                                            ${vendor.first_name}- ${vendor.last_name}
                                        </label>
                                    </div>
                                </div>
                            `);
                        });
                    }
                }
            });
        });

    });
</script>


@endpush