@extends('Admin.layout')
@section('content')
    <div class="d-flex justify-content-between align-items-center mb-1">

        <!-- Left side -->
        <div class="d-flex align-items-center">
            <h5 class="mb-0">
                <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                    style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('project_table') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                Create Project
            </h5>
        </div>

        <!-- Right side -->
        <a href="{{ route('create_project_by') }}" class="btn btn-primary">
            <i class="ti tabler-plus me-1"></i>
            Add Project By
        </a>

    </div>
    <div class="card p-4 mt-4">
        <h6>Create Project</h6>
        <form action="{{ route('add_project') }}" method="post" id="login_form">
            @csrf
            <div class="row">
                <div class="col-lg-3 mb-2">
                    <label class="form-label">Project Name</label>
                    <input type="text" class="form-control @error('project_name') is-invalid @enderror"
                        placeholder="Enter Project Name" name="project_name" value="{{ old('project_name') }}">
                    @error('project_name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-3 mb-2">
                    <label class="form-label">Project Type</label>
                    <select class="form-control @error('type') is-invalid @enderror" name="type">
                        <option value="">Select Project Type</option>
                        <option value="Client Project" {{ old('type') == 'Client Project' ? 'selected' : '' }}>
                            Client Project
                        </option>
                        <option value="Product" {{ old('type') == 'Product' ? 'selected' : '' }}>
                            Product
                        </option>
                    </select>
                    @error('type')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-3 mb-4">
                    <label class="form-label">Project By</label>

                    <select class="form-control @error('project_by') is-invalid @enderror" name="project_by">
                        <option value="">Select Project By</option>

                        @foreach ($projectBies as $projectBy)
                            <option value="{{ $projectBy->project_by }}" {{ old('project_by') == $projectBy->project_by ? 'selected' : '' }}>
                                {{ $projectBy->project_by }}
                            </option>
                        @endforeach
                    </select>

                    @error('project_by')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-lg-3 mb-4">
                    <label class="form-label">Project By Name</label>

                    <input type="text" class="form-control @error('project_by_name') is-invalid @enderror"
                        name="project_by_name" value="{{ old('project_by_name') }}" placeholder="Enter Project By Name">

                    @error('project_by_name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <!-- <div class="col-lg-6 mb-2">
                                                                                                <label class="form-label">Module</label>
                                                                                                <input type="text" class="form-control @error('module_name') is-invalid @enderror"
                                                                                                    placeholder="Enter Module Name" name="module_name" value="{{ old('module_name') }}">
                                                                                                @error('module_name')
                                                                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                                                                @enderror
                                                                                            </div>
                                                                                            <div class="col-lg-6 mb-2">
                                                                                                <label class="form-label">Overall</label>
                                                                                                <input type="text" class="form-control @error('overall') is-invalid @enderror" placeholder="Overall"
                                                                                                    name="overall" value="{{ old('overall') }}">
                                                                                                @error('overall')
                                                                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                                                                @enderror
                                                                                            </div> -->

                <div class="col-lg-12 mb-3">
                    <label class="form-label">Deliverables</label>

                    <div id="deliverables">

                        @php
                            $oldDeliverables = old('deliverables', ['']);
                            $deliverableCount = count($oldDeliverables);

                            if ($deliverableCount == 0) {
                                $deliverableCount = 1;
                            }
                        @endphp

                        @for ($i = 0; $i < $deliverableCount; $i++)
                            <div class="deliverable-row border rounded p-3 mb-3">

                                <div class="row align-items-end">

                                    <div class="col-lg-11 mb-2">
                                        <input type="text"
                                            class="form-control @error('deliverables.' . $i) is-invalid @enderror"
                                            name="deliverables[]" value="{{ old('deliverables.' . $i) }}"
                                            placeholder="Enter Deliverable">

                                        @error('deliverables.' . $i)
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-lg-1 mb-2 text-end deliverable-action">

                                        @if ($i == $deliverableCount - 1)
                                            <button type="button" class="btn btn-success add-deliverable">
                                                +
                                            </button>
                                        @else
                                            <button type="button" class="btn btn-danger remove-deliverable">
                                                -
                                            </button>
                                        @endif

                                    </div>

                                </div>

                            </div>
                        @endfor

                    </div>
                </div>
                <div class="col-lg-12 mb-3">
                    <label class="form-label">Client Details</label>

                    <div id="clientDetails">

                        @php
                            $oldClientNames = old('client_name', ['']);
                            $oldClientRoles = old('client_role', []);
                            $oldClientMobiles = old('client_mobile', []);
                            $oldClientEmails = old('client_email', []);
                            $oldClientAddresses = old('client_address', []);

                            $clientCount = max(
                                count($oldClientNames),
                                count($oldClientRoles),
                                count($oldClientMobiles),
                                count($oldClientEmails),
                                count($oldClientAddresses)
                            );

                            if ($clientCount == 0) {
                                $clientCount = 1;
                            }
                        @endphp

                        @for ($i = 0; $i < $clientCount; $i++)
                            <div class="client-detail-row border rounded p-3 mb-3">

                                <div class="row">

                                    <div class="col-lg-6 mb-2">
                                        <label class="form-label">Client Name</label>

                                        <input type="text" class="form-control @error('client_name.' . $i) is-invalid @enderror"
                                            name="client_name[]" value="{{ old('client_name.' . $i) }}"
                                            placeholder="Enter Client Name">

                                        @error('client_name.' . $i)
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-lg-6 mb-2">
                                        <label class="form-label">Role</label>

                                        <input type="text" class="form-control @error('client_role.' . $i) is-invalid @enderror"
                                            name="client_role[]" value="{{ old('client_role.' . $i) }}"
                                            placeholder="Enter Role">

                                        @error('client_role.' . $i)
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-lg-4 mb-2">
                                        <label class="form-label">Mobile</label>

                                        <input type="text"
                                            class="form-control @error('client_mobile.' . $i) is-invalid @enderror"
                                            name="client_mobile[]" value="{{ old('client_mobile.' . $i) }}" minlength="10"
                                            maxlength="10" placeholder="Enter Mobile Number">

                                        @error('client_mobile.' . $i)
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-lg-4 mb-2">
                                        <label class="form-label">Email</label>

                                        <input type="email"
                                            class="form-control @error('client_email.' . $i) is-invalid @enderror"
                                            name="client_email[]" value="{{ old('client_email.' . $i) }}"
                                            placeholder="Enter Email">

                                        @error('client_email.' . $i)
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-lg-4 mb-2">
                                        <label class="form-label">Address</label>

                                        <input type="text"
                                            class="form-control @error('client_address.' . $i) is-invalid @enderror"
                                            name="client_address[]" value="{{ old('client_address.' . $i) }}"
                                            placeholder="Enter Client Address">

                                        @error('client_address.' . $i)
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-lg-12 text-end mt-2 client-action">

                                        @if ($i == $clientCount - 1)
                                            <button type="button" class="btn btn-success add-client">
                                                +
                                            </button>
                                        @else
                                            <button type="button" class="btn btn-danger remove-client">
                                                <i class="ti ti-minus"></i>
                                            </button>
                                        @endif

                                    </div>

                                </div>

                            </div>
                        @endfor

                    </div>
                </div>
                <hr>

                <div class="col-lg-6 mb-3 mt-2">
                    <label class="form-label">Sheet Link</label>
                    <input type="text" class="form-control" name="sheet_link" value="{{ old('sheet_link') }}">
                    @error('sheet_link')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-6 mb-3 mt-2">
                    <label class="form-label">Figma Link</label>
                    <input type="text" class="form-control" name="figma_link" value="{{ old('figma_link') }}">
                    @error('figma_link')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-6 mb-3 mt-2">
                    <label class="form-label">Document Link</label>
                    <input type="text" class="form-control" name="document_link" value="{{ old('document_link') }}">
                    @error('document_link')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-6 mb-3 mt-2">
                    <label class="form-label">Git Link</label>
                    <input type="text" class="form-control" name="git_link" value="{{ old('git_link') }}">
                    @error('git_link')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
        </form>
        <div class="d-flex form-actions mt-3">
            <button type="button" class="btn btn-primary me-3" id="finalSubmit">Create
                Project</button>
            <button type="reset" class="btn btn-outline-secondary">Cancel</button>
        </div>
    </div>
    </div>
    <!-- <div class="modal fade" id="submit" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
                                                                                <div class="modal-dialog modal-sm modal-dialog-centered">
                                                                                    <div class="modal-content rounded-4 px-4 py-5 text-center">
                                                                                        <h5 class="fw-bold mb-2">Are you sure?</h5>
                                                                                        <p class="text-muted mb-4">Do you confirm to submit this form?</p>
                                                                                        <div class="d-flex justify-content-center gap-3 mt-3">
                                                                                            <button type="button" class="btn btn-outline-secondary px-4" data-bs-dismiss="modal">
                                                                                                Cancel
                                                                                            </button>
                                                                                            <button type="button" class="btn btn-primary px-4 fw-semibold" id="finalSubmit">
                                                                                                Yes, Sure
                                                                                            </button>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div> -->
    <script>
        document.getElementById('finalSubmit').addEventListener('click', function (e) {
            e.preventDefault();
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('login_form').submit();
        });
    </script>
    <script>
        document.addEventListener('click', function (e) {

            // ADD CLIENT
            if (e.target.closest('.add-client')) {

                let currentRow = e.target.closest('.client-detail-row');

                // Change current + button to -
                let currentAction = currentRow.querySelector('.client-action');

                currentAction.innerHTML = `
                                                        <button type="button" class="btn btn-danger remove-client">
                                                            <i class="ti ti-minus"></i>
                                                        </button>
                                                    `;

                // Add new client row
                let newRow = `
                                                        <div class="client-detail-row border rounded p-3 mb-3">

                                                            <div class="row">

                                                                <div class="col-lg-6 mb-2">
                                                                    <label class="form-label">Client Name</label>
                                                                    <input type="text"
                                                                           name="client_name[]"
                                                                           class="form-control"
                                                                           placeholder="Enter Client Name">
                                                                </div>

                                                                <div class="col-lg-6 mb-2">
                                                                    <label class="form-label">Role</label>
                                                                    <input type="text"
                                                                           name="client_role[]"
                                                                           class="form-control"
                                                                           placeholder="Enter Role">
                                                                </div>

                                                                <div class="col-lg-4 mb-2">
                                                                    <label class="form-label">Mobile</label>
                                                                    <input type="text"
                                                                           name="client_mobile[]"
                                                                           class="form-control"
                                                                           minlength="10"
                                                                           maxlength="10"
                                                                           placeholder="Enter Mobile Number">
                                                                </div>

                                                                <div class="col-lg-4 mb-2">
                                                                    <label class="form-label">Email</label>
                                                                    <input type="email"
                                                                           name="client_email[]"
                                                                           class="form-control"
                                                                           placeholder="Enter Email">
                                                                </div>

                                                                <div class="col-lg-4 mb-2">
                                                                    <label class="form-label">Address</label>
                                                                    <input type="text"
                                                                           name="client_address[]"
                                                                           class="form-control"
                                                                           placeholder="Enter Client Address">
                                                                </div>

                                                                <div class="col-lg-12 text-end mt-2 client-action">
                                                                    <button type="button" class="btn btn-success add-client">
                                                                        +
                                                                    </button>
                                                                </div>

                                                            </div>

                                                        </div>
                                                    `;

                document.getElementById('clientDetails')
                    .insertAdjacentHTML('beforeend', newRow);
            }


            // REMOVE CLIENT
            if (e.target.closest('.remove-client')) {

                let row = e.target.closest('.client-detail-row');

                row.remove();

                // Get all remaining client rows
                let rows = document.querySelectorAll('.client-detail-row');

                // Make only the last row show +
                rows.forEach(function (row, index) {

                    let action = row.querySelector('.client-action');

                    if (index === rows.length - 1) {

                        action.innerHTML = `
                                                                <button type="button" class="btn btn-success add-client">
                                                                    +
                                                                </button>
                                                            `;

                    } else {

                        action.innerHTML = `
                                                                <button type="button" class="btn btn-danger remove-client">
                                                                    -
                                                                </button>
                                                            `;
                    }
                });
            }
            // ADD DELIVERABLE
            if (e.target.closest('.add-deliverable')) {

                let currentRow = e.target.closest('.deliverable-row');

                // Change current + button to -
                let currentAction = currentRow.querySelector('.deliverable-action');

                currentAction.innerHTML = `
            <button type="button" class="btn btn-danger remove-deliverable">
                -
            </button>
        `;

                // Add new deliverable row
                let newRow = `
            <div class="deliverable-row border rounded p-3 mb-3">

                <div class="row align-items-end">

                    <div class="col-lg-11 mb-2">
                        <label class="form-label">Deliverable</label>

                        <input type="text"
                            name="deliverables[]"
                            class="form-control"
                            placeholder="Enter Deliverable">
                    </div>

                    <div class="col-lg-1 mb-2 text-end deliverable-action">

                        <button type="button"
                            class="btn btn-success add-deliverable">
                            +
                        </button>

                    </div>

                </div>

            </div>
        `;

                document.getElementById('deliverables')
                    .insertAdjacentHTML('beforeend', newRow);
            }


            // REMOVE DELIVERABLE
            if (e.target.closest('.remove-deliverable')) {

                let row = e.target.closest('.deliverable-row');

                row.remove();

                // Get all remaining deliverable rows
                let rows = document.querySelectorAll('.deliverable-row');

                // Make only the last row show +
                rows.forEach(function (row, index) {

                    let action = row.querySelector('.deliverable-action');

                    if (index === rows.length - 1) {

                        action.innerHTML = `
                    <button type="button"
                        class="btn btn-success add-deliverable">
                        +
                    </button>
                `;

                    } else {

                        action.innerHTML = `
                    <button type="button"
                        class="btn btn-danger remove-deliverable">
                        -
                    </button>
                `;
                    }
                });
            }
        });
    </script>
@endsection