@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">Update Requirement</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">

                <div class="card-body">

                    <form method="POST"
                        action="{{ route('requirements.update', $requirement) }}"
                        enctype="multipart/form-data">
                        @csrf

                        {{-- TABS --}}
                        <ul class="nav nav-pills nav-justified mb-3">
                            <li class="nav-item">
                                <a class="nav-link active" data-bs-toggle="tab" href="#basic">
                                    Basic Details
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#vendors">
                                    Select Vendors
                                </a>
                            </li>
                        </ul>

                        <div class="tab-content">

                            {{-- BASIC DETAILS --}}
                            <div class="tab-pane fade show active" id="basic">
                                <div class="row g-3">

                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input name="reqname"
                                                class="form-control @error('reqname') is-invalid @enderror"
                                                value="{{ old('reqname', $requirement->name) }}">
                                            <label>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"
                                                class="form-control @error('reqdscr') is-invalid @enderror"
                                                value="{{ old('reqdscr', $requirement->description) }}">
                                            <label>Description</label>
                                            @error('reqdscr')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input class="form-control"
                                                value="{{ $requirement->project?->project_name }}"
                                                disabled>
                                            <label>Project</label>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <select name="reqstatus"
                                                    class="form-select @error('reqstatus') is-invalid @enderror">
                                                <option value="open" {{ $requirement->status === 'open' ? 'selected' : '' }}>
                                                    Open
                                                </option>
                                                <option value="closed" {{ $requirement->status === 'closed' ? 'selected' : '' }}>
                                                    Closed
                                                </option>
                                            </select>
                                            <label>Status</label>
                                            @error('reqstatus')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input class="form-control"
                                                value="{{ $requirement->category?->name }}"
                                                disabled>
                                            <label>Category</label>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input id="mdate"
                                                name="selectreqdate"
                                                class="form-control @error('selectreqdate') is-invalid @enderror"
                                                value="{{ old('selectreqdate', $requirement->bidding_last_date) }}">
                                            <label>Bidding Last Date</label>
                                            @error('selectreqdate')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-bold">Sub-category</label>

                                        <div class="form-check">
                                            <input class="form-check-input"
                                                type="checkbox"
                                                checked
                                                disabled>

                                            <label class="form-check-label">
                                                {{ $requirement->subcategory?->name ?? '-' }}
                                            </label>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            {{-- VENDORS --}}
                            <div class="tab-pane fade" id="vendors">
                                <div class="row mt-3">

                                    @forelse($allVendors as $vendor)
                                        <div class="col-md-3 mb-2">
                                            <div class="form-check">
                                                <input class="form-check-input"
                                                    type="checkbox"
                                                    name="vendors[]"
                                                    value="{{ $vendor->id }}"
                                                    id="vendor_{{ $vendor->id }}"
                                                    {{ in_array($vendor->id, $selectedVendors) ? 'checked' : '' }}>

                                                <label class="form-check-label"
                                                    for="vendor_{{ $vendor->id }}">
                                                    {{ $vendor->first_name }} {{ $vendor->last_name }}
                                                </label>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="col-12">
                                            <p class="text-muted">
                                                No vendors found for selected category & sub-category.
                                            </p>
                                        </div>
                                    @endforelse

                                </div>
                            </div>


                        </div>

                        {{-- SUBMIT --}}
                        <div class="text-end mt-3">
                            <button class="btn btn-primary">
                                Update Requirement
                            </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
            });
        });
</script>


@endpush