@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>

                Edit Project

            </h5>

        </div>

    </div>

    <div class="card p-4 mt-4">

        <h6>Edit Project</h6>

        <form action="{{ route('update_project') }}" method="post" id="login_form">

            @csrf

            <input type="hidden" name="id" value="{{ $project->id }}">

            <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" name="project_name"
                        value="{{ old('project_name', $project->project_name) }}" placeholder="Enter 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', $project->type ?? '') == 'Client Project' ? 'selected' : '' }}>

                            Client Project

                        </option>

                        <option value="Product" {{ old('type', $project->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', $project->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', $project->project_by_name) }}"
                        placeholder="Enter Project By Name">

                    @error('project_by_name')
                        <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
                            $deliverables = old('deliverables', $project->deliverables ?? []);

                            if (!is_array($deliverables)) {
                                $deliverables = [];
                            }

                            if (empty($deliverables)) {
                                $deliverables = [''];
                            }
                        @endphp

                        @foreach ($deliverables as $index => $deliverable)

                            <div class="deliverable-row border rounded p-3 mb-3">

                                <div class="row">

                                    <div class="col-lg-11 mb-2">

                                        <label class="form-label">Deliverable</label>

                                        <input type="text"
                                            class="form-control @error('deliverables.' . $index) is-invalid @enderror"
                                            name="deliverables[]" value="{{ old('deliverables.' . $index, $deliverable) }}"
                                            placeholder="Enter Deliverable">

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

                                    </div>

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

                                        @if ($index == count($deliverables) - 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>

                        @endforeach

                    </div>

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

                    <label class="form-label">Client Details</label>

                    <div id="clientDetails">

                        @php

                            $clientDetails = old('client_details', $project->client_details ?? []);

                            if (!is_array($clientDetails)) {
                                $clientDetails = [];
                            }


                            if (empty($clientDetails)) {
                                $clientDetails = [
                                    [
                                        'name' => $project->client_name ?? '',
                                        'role' => '',
                                        'mobile' => $project->client_mobile ?? '',
                                        'email' => $project->client_email ?? '',
                                        'address' => $project->address ?? '',
                                    ]
                                ];
                            }

                            if (empty($clientDetails)) {
                                $clientDetails = [
                                    [
                                        'name' => '',
                                        'role' => '',
                                        'mobile' => '',
                                        'email' => '',
                                        'address' => '',
                                    ]
                                ];
                            }
                        @endphp

                        @foreach ($clientDetails as $index => $client)

                            <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_details.' . $index . '.name') is-invalid @enderror"
                                            name="client_details[{{ $index }}][name]"
                                            value="{{ old('client_details.' . $index . '.name', $client['name'] ?? '') }}"
                                            placeholder="Enter Client Name">

                                        @error('client_details.' . $index . '.name')
                                            <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_details.' . $index . '.role') is-invalid @enderror"
                                            name="client_details[{{ $index }}][role]"
                                            value="{{ old('client_details.' . $index . '.role', $client['role'] ?? '') }}"
                                            placeholder="Enter Role">

                                        @error('client_details.' . $index . '.role')
                                            <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_details.' . $index . '.mobile') is-invalid @enderror"
                                            name="client_details[{{ $index }}][mobile]"
                                            value="{{ old('client_details.' . $index . '.mobile', $client['mobile'] ?? '') }}"
                                            minlength="10" maxlength="10" placeholder="Enter Mobile Number">

                                        @error('client_details.' . $index . '.mobile')
                                            <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_details.' . $index . '.email') is-invalid @enderror"
                                            name="client_details[{{ $index }}][email]"
                                            value="{{ old('client_details.' . $index . '.email', $client['email'] ?? '') }}"
                                            placeholder="Enter Email">

                                        @error('client_details.' . $index . '.email')
                                            <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_details.' . $index . '.address') is-invalid @enderror"
                                            name="client_details[{{ $index }}][address]"
                                            value="{{ old('client_details.' . $index . '.address', $client['address'] ?? '') }}"
                                            placeholder="Enter Client Address">

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

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

                                        @if ($index == count($clientDetails) - 1)

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

                                        @else

                                            <button type="button" class="btn btn-danger remove-client">
                                                -
                                            </button>

                                        @endif

                                    </div>

                                </div>

                            </div>

                        @endforeach

                    </div>

                </div>
                <hr>
                <div class="col-lg-6 mb-2">

                    <label class="form-label">Figma link</label>

                    <input type="text" class="form-control @error('figma_link') is-invalid @enderror" name="figma_link"
                        value="{{ old('figma_link', $project->figma_link) }}" placeholder="Enter Module Name">

                    @error('figma_link')

                        <div class="invalid-feedback">{{ $message }}</div>

                    @enderror

                </div>

                <div class="col-lg-6 mb-2">

                    <label class="form-label">sheet link</label>

                    <input type="text" class="form-control @error('sheet_link') is-invalid @enderror" name="sheet_link"
                        value="{{ old('sheet_link', $project->sheet_link) }}" placeholder="Enter Module Name">

                    @error('sheet_link')

                        <div class="invalid-feedback">{{ $message }}</div>

                    @enderror

                </div>

                <div class="col-lg-6 mb-2">

                    <label class="form-label">Document link</label>

                    <input type="text" class="form-control @error('document_link') is-invalid @enderror"
                        name="document_link" value="{{ old('document_link', $project->document_link) }}">

                    @error('document_link')

                        <div class="invalid-feedback">{{ $message }}</div>

                    @enderror

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

                    <label class="form-label">Git link</label>

                    <input type="text" class="form-control @error('git_link') is-invalid @enderror" name="git_link"
                        value="{{ old('git_link', $project->git_link) }}">

                    @error('git_link')

                        <div class="invalid-feedback">{{ $message }}</div>

                    @enderror

                </div>


                <!-- <div class="col-lg-6 mb-2">

                                                <label class="form-label">Live Url</label>

                                                <input type="text" class="form-control @error('live_url') is-invalid @enderror" name="live_url"
                                                    value="{{ old('live_url', $project->live_url) }}" placeholder="Enter url ">

                                                @error('live_url')

                                                    <div class="invalid-feedback">{{ $message }}</div>

                                                @enderror

                                            </div>

                                            <div class="col-lg-6 mb-2">

                                                <label class="form-label">test Url</label>

                                                <input type="text" class="form-control @error('test_url') is-invalid @enderror" name="test_url"
                                                    value="{{ old('test_url', $project->test_url) }}" placeholder="Enter url ">

                                                @error('test_url')

                                                    <div class="invalid-feedback">{{ $message }}</div>

                                                @enderror

                                            </div> -->

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

                    <div id="liveUrls">
                        @php
                            $liveUrls = old('live_urls', $project->live_urls ?? []);

                            if (!is_array($liveUrls)) {
                                $liveUrls = [];
                            }

                            // If old single URL exists and no multiple URLs are stored
                            if (empty($liveUrls) && !empty($project->live_url)) {
                                $liveUrls = [$project->live_url];
                            }

                            if (empty($liveUrls)) {
                                $liveUrls = [''];
                            }
                        @endphp

                        @foreach ($liveUrls as $index => $url)
                            <div class="input-group mb-2 live-url-row">
                                <input type="text" class="form-control" name="live_urls[]" value="{{ $url }}"
                                    placeholder="Enter Live URL">

                                @if ($index == 0)
                                    <button type="button" class="btn btn-success add-live-url">
                                        +
                                    </button>
                                @else
                                    <button type="button" class="btn btn-danger remove-live-url">
                                        -
                                    </button>
                                @endif
                            </div>
                        @endforeach
                    </div>

                    @error('live_urls.*')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>


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

                    <div id="testUrls">
                        @php
                            $testUrls = old('test_urls', $project->test_urls ?? []);

                            if (!is_array($testUrls)) {
                                $testUrls = [];
                            }

                            // If old single URL exists and no multiple URLs are stored
                            if (empty($testUrls) && !empty($project->test_url)) {
                                $testUrls = [$project->test_url];
                            }

                            if (empty($testUrls)) {
                                $testUrls = [''];
                            }
                        @endphp

                        @foreach ($testUrls as $index => $url)
                            <div class="input-group mb-2 test-url-row">
                                <input type="text" class="form-control" name="test_urls[]" value="{{ $url }}"
                                    placeholder="Enter Test URL">

                                @if ($index == 0)
                                    <button type="button" class="btn btn-success add-test-url">
                                        +
                                    </button>
                                @else
                                    <button type="button" class="btn btn-danger remove-test-url">
                                        -
                                    </button>
                                @endif
                            </div>
                        @endforeach
                    </div>

                    @error('test_urls.*')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>
            </div>

        </form>

        <div class="d-flex form-actions mt-3">

            <button type="button" class="btn btn-primary me-3" data-bs-toggle="modal" data-bs-target="#submit">Update

                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 update?</p>

                <div class="d-flex justify-content-center gap-3 mt-3">

                    <!-- Cancel -->

                    <button type="button" class="btn btn-outline-secondary px-4" data-bs-dismiss="modal">

                        Cancel

                    </button>

                    <!-- Final submit -->

                    <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 Live URL
            if (e.target.classList.contains('add-live-url')) {

                let row = `
                                    <div class="input-group mb-2 live-url-row">
                                        <input type="text"
                                               class="form-control"
                                               name="live_urls[]"
                                               placeholder="Enter Live URL">

                                        <button type="button"
                                                class="btn btn-danger remove-live-url">
                                            -
                                        </button>
                                    </div>
                                `;

                document.getElementById('liveUrls')
                    .insertAdjacentHTML('beforeend', row);
            }


            // Remove Live URL
            if (e.target.classList.contains('remove-live-url')) {
                e.target.closest('.live-url-row').remove();
            }


            // Add Test URL
            if (e.target.classList.contains('add-test-url')) {

                let row = `
                                    <div class="input-group mb-2 test-url-row">
                                        <input type="text"
                                               class="form-control"
                                               name="test_urls[]"
                                               placeholder="Enter Test URL">

                                        <button type="button"
                                                class="btn btn-danger remove-test-url">
                                            -
                                        </button>
                                    </div>
                                `;

                document.getElementById('testUrls')
                    .insertAdjacentHTML('beforeend', row);
            }


            // Remove Test URL
            if (e.target.classList.contains('remove-test-url')) {
                e.target.closest('.test-url-row').remove();
            }

        });
    </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');
                let clientIndex = document.querySelectorAll('.client-detail-row').length;

                currentAction.innerHTML = `
                                <button type="button" class="btn btn-danger remove-client">
                                    +
                                </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"
                                    class="form-control"
                                    name="client_details[${clientIndex}][name]"
                                    placeholder="Enter Client Name">
                            </div>

                            <div class="col-lg-6 mb-2">
                                <label class="form-label">Role</label>
                                <input type="text"
                                    class="form-control"
                                    name="client_details[${clientIndex}][role]"
                                    placeholder="Enter Role">
                            </div>

                            <div class="col-lg-4 mb-2">
                                <label class="form-label">Mobile</label>
                                <input type="text"
                                    class="form-control"
                                    name="client_details[${clientIndex}][mobile]"
                                    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"
                                    class="form-control"
                                    name="client_details[${clientIndex}][email]"
                                    placeholder="Enter Email">
                            </div>

                            <div class="col-lg-4 mb-2">
                                <label class="form-label">Address</label>
                                <input type="text"
                                    class="form-control"
                                    name="client_details[${clientIndex}][address]"
                                    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>
                `;

                clientIndex++;

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


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

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

                row.remove();

                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">

                    <div class="col-lg-11 mb-2">

                        <label class="form-label">Deliverable</label>

                        <input type="text"
                            class="form-control"
                            name="deliverables[]"
                            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();

                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