@extends('components.customer_layout')
@section('customer-content')
    <x-slot name="title">Create License Issuer</x-slot>



    <div class="container">
        <div class="row justify-content-center">

            <div class="col-md-8">
                <h1>Create License Issuer</h1>
    <form action="{{ route('construction.licenseIssuer.store') }}" method="POST">
        @csrf

        <!-- Construction Type Selection -->
        <div class="form-group">
            <label for="construction_type">Construction Type</label><br>
            <input type="checkbox" name="construction_type[]" value="A"> A
            <input type="checkbox" name="construction_type[]" value="B"> B
            <input type="checkbox" name="construction_type[]" value="C"> C
        </div>


{{--
        <div class="table-responsive mt-3">
            <table class="table table-bordered" id="document-type-table">
                <thead>
                    <tr>
                        <th>Document Type</th>
                        <th>Page</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <select name="document_type_id[]" class="form-control document-type-select" required>
                                <option value="">Select Document Type</option>
                                @foreach ($documentTypes as $documentType)
                                    <option value="{{ $documentType->id }}">{{ $documentType->name }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <input type="number" name="page[]" class="form-control page-input" placeholder="Enter Page" required>
                        </td>
                        <td>
                            <button type="button" class="btn btn-success add-row">Add</button>
                            <button type="button" class="btn btn-danger remove-row" disabled>Remove</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div> --}}


        {{-- <script>
            document.addEventListener('DOMContentLoaded', () => {
                const table = document.getElementById('document-type-table');
                const tbody = table.querySelector('tbody');

                // Function to add a new row
                const addRow = () => {
                    const newRow = document.createElement('tr');
                    newRow.innerHTML = `
                        <td>
                            <select name="document_type_id[]" class="form-control document-type-select" required>
                                <option value="">Select Document Type</option>
                                @foreach ($documentTypes as $documentType)
                                    <option value="{{ $documentType->id }}">{{ $documentType->name }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <input type="number" name="page[]" class="form-control page-input" placeholder="Enter Page" required>
                        </td>
                        <td>
                            <button type="button" class="btn btn-success add-row">Add</button>
                            <button type="button" class="btn btn-danger remove-row">Remove</button>
                        </td>
                    `;
                    tbody.appendChild(newRow);
                    updateRemoveButtons();
                };

                // Function to update remove button state
                const updateRemoveButtons = () => {
                    const rows = tbody.querySelectorAll('tr');
                    rows.forEach(row => {
                        const removeButton = row.querySelector('.remove-row');
                        removeButton.disabled = rows.length <= 1;
                    });
                };

                // Event listener for add/remove buttons
                table.addEventListener('click', (event) => {
                    if (event.target.classList.contains('add-row')) {
                        addRow();
                    } else if (event.target.classList.contains('remove-row')) {
                        const row = event.target.closest('tr');
                        row.remove();
                        updateRemoveButtons();
                    }
                });

                // Update remove button state when rows are added or removed
                table.addEventListener('DOMNodeInserted', updateRemoveButtons);
                table.addEventListener('DOMNodeRemoved', updateRemoveButtons);
            });
        </script> --}}



        {{-- <div class="table-responsive mt-3">
            <table class="table table-bordered" id="design-type-table">
                <thead>
                    <tr>
                        <th>Design Type</th>
                        <th>Page</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <select name="design_type_id[]" class="form-control design-type-select" required>
                                <option value="">Select Design Type</option>
                                @foreach ($designTypes as $designType)
                                    <option value="{{ $designType->id }}">{{ $designType->name }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <input type="number" name="page[]" class="form-control page-input" placeholder="Enter Page" required>
                        </td>
                        <td>
                            <button type="button" class="btn btn-success add-row">Add</button>
                            <button type="button" class="btn btn-danger remove-row" disabled>Remove</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div> --}}

        <label>Document Types:</label>
        @foreach($documentTypes as $documentType)
            <div>
                <input type="checkbox" name="document_types[{{ $documentType->id }}][id]" value="{{ $documentType->id }}">
                <label>{{ $documentType->name }}</label>
                <input type="text" name="document_types[{{ $documentType->id }}][page_number]" placeholder="Page Number">
            </div>
        @endforeach

        <label>Design Types:</label>
        @foreach($designTypes as $designType)
            <div>
                <input type="checkbox" name="design_types[{{ $designType->id }}][id]" value="{{ $designType->id }}">
                <label>{{ $designType->name }}</label>
                <input type="text" name="design_types[{{ $designType->id }}][page_number]" placeholder="Page Number">
            </div>
        @endforeach

        {{-- <script>
            document.addEventListener('DOMContentLoaded', () => {
                const table = document.getElementById('design-type-table');
                const tbody = table.querySelector('tbody');

                // Function to add a new row
                const addRow = () => {
                    const newRow = document.createElement('tr');
                    newRow.innerHTML = `
                        <td>
                            <select name="design_type_id[]" class="form-control design-type-select" required>
                                <option value="">Select Design Type</option>
                                @foreach ($designTypes as $designType)
                                    <option value="{{ $designType->id }}">{{ $designType->name }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <input type="number" name="page[]" class="form-control page-input" placeholder="Enter Page" required>
                        </td>
                        <td>
                            <button type="button" class="btn btn-success add-row">Add</button>
                            <button type="button" class="btn btn-danger remove-row">Remove</button>
                        </td>
                    `;
                    tbody.appendChild(newRow);
                    updateRemoveButtons();
                };

                // Function to update remove button state
                const updateRemoveButtons = () => {
                    const rows = tbody.querySelectorAll('tr');
                    rows.forEach(row => {
                        const removeButton = row.querySelector('.remove-row');
                        removeButton.disabled = rows.length <= 1;
                    });
                };

                // Event listener for add/remove buttons
                table.addEventListener('click', (event) => {
                    if (event.target.classList.contains('add-row')) {
                        addRow();
                    } else if (event.target.classList.contains('remove-row')) {
                        const row = event.target.closest('tr');
                        row.remove();
                        updateRemoveButtons();
                    }
                });

                // Update remove button state when rows are added or removed
                table.addEventListener('DOMNodeInserted', updateRemoveButtons);
                table.addEventListener('DOMNodeRemoved', updateRemoveButtons);
            });
        </script> --}}


        <!-- Carta Number -->
        <div class="form-group">
            <label for="carta_number">Carta Number</label>
            <input type="text" name="carta_number" id="carta_number" class="form-control" required>
            @error('carta_number')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>



        <!-- Issue Date -->
        <div class="form-group">
            <label for="issue_date">Issue Date</label>
            <input type="date" name="issue_date" id="issue_date" class="form-control" required>
            @error('issue_date')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>

        <!-- Area -->
        <div class="form-group">
            <label for="area">Area</label>
            <input type="text" name="area" id="area" class="form-control" required>
            @error('area')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>

          <!-- Is Completed -->
          <div class="form-group">
            <label for="is_completed">Is Completed</label><br>
            <input type="checkbox" name="is_completed" value="yes" > Yes
            <input type="checkbox" name="is_completed" value="no"> No
            {{-- @error('is_completed')
                <div class="text-danger">{{ $message }}</div>
            @enderror --}}
        </div>

        <!-- Plan Agreement Number -->
        <div class="form-group">
            <label for="plan_agreement_number">Plan Agreement Number</label>
            <input type="text" name="plan_agreement_number" id="plan_agreement_number" class="form-control" required>
            @error('plan_agreement_number')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>

        <!-- PV Number -->
        <div class="form-group">
            <label for="pv_number">PV Number (Receipt Number)</label>
            <input type="text" name="pv_number" id="pv_number" class="form-control" required>
            @error('pv_number')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>

        <!-- Evidence Accepted By -->
        <div class="form-group">
            <label for="evidence_accepted_by">Evidence Accepted By</label>
            <input type="text" name="evidence_accepted_by" id="evidence_accepted_by" class="form-control" required>
            @error('evidence_accepted_by')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>

        <!-- Date of Acceptance -->
        <div class="form-group">
            <label for="date_of_acceptance">Date of Acceptance</label>
            <input type="date" name="date_of_acceptance" id="date_of_acceptance" class="form-control" required>
            @error('date_of_acceptance')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>

        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
            </div></div></div>


@endsection