@extends('layouts.app')

@section('title', 'Edit Country | DYSON LATAM')

@section('content')

    <style>
        .country-form-page {
            display: flex;
            flex-direction: column;
            gap: 18px;
            width: 900px;
            max-width: 100%;
            margin: 0;
        }

        .country-form-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
        }

        .country-form-kicker {
            margin-bottom: 5px;
            color: #7a80a0;
            font-family: monospace;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        .country-form-title {
            margin: 0;
            color: #161929;
            font-size: 24px;
            font-weight: 800;
            letter-spacing: -.03em;
        }

        .country-form-subtitle {
            margin: 6px 0 0;
            color: #7a80a0;
            font-family: monospace;
            font-size: 10px;
        }

        .country-back-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 36px;
            padding: 0 13px;
            border: 1px solid #dde1ee;
            border-radius: 8px;
            background: #ffffff;
            color: #555b74;
            font-family: monospace;
            font-size: 8px;
            font-weight: 700;
            text-decoration: none;
            text-transform: uppercase;
        }

        .country-back-link:hover {
            background: #f7f8fc;
            color: #171a2b;
        }

        .country-form-card {
            background: #ffffff;
            border: 1px solid #dde1ee;
            border-radius: 12px;
            box-shadow: 0 4px 14px rgba(31, 36, 56, .04);
            padding: 20px;
        }

        .country-form-section {
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #edf0f6;
        }

        .country-form-section:last-of-type {
            margin-bottom: 0;
        }

        .country-form-section-title {
            margin: 0;
            color: #1a1d2e;
            font-size: 13px;
            font-weight: 800;
        }

        .country-form-section-description {
            margin: 5px 0 14px;
            color: #8c91aa;
            font-family: monospace;
            font-size: 8px;
            line-height: 1.5;
        }

        .country-form-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .country-form-label {
            color: #4d536d;
            font-family: monospace;
            font-size: 8px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .country-form-input {
            width: 100%;
            min-height: 40px;
            padding: 0 11px;
            border: 1px solid #dfe3ee;
            border-radius: 8px;
            outline: none;
            background: #ffffff;
            color: #252a3d;
            font-size: 10px;
        }

        .country-form-input:focus {
            border-color: #8d93aa;
            box-shadow: 0 0 0 3px rgba(23, 26, 43, .05);
        }

        .country-form-error {
            color: #d03535;
            font-family: monospace;
            font-size: 8px;
        }

        .country-config-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }

        .country-config-card {
            border: 1px solid #e1e4ed;
            border-radius: 10px;
            background: #fafbfe;
            overflow: hidden;
        }

        .country-config-card-header {
            padding: 11px 13px;
            border-bottom: 1px solid #e7e9f1;
            background: #f4f5f9;
        }

        .country-config-card-title {
            margin: 0;
            color: #24283a;
            font-size: 10px;
            font-weight: 800;
        }

        .country-config-list {
            display: flex;
            flex-direction: column;
        }

        .country-config-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 11px 13px;
            border-bottom: 1px solid #edf0f6;
            background: #ffffff;
        }

        .country-config-row:last-child {
            border-bottom: 0;
        }

        .country-config-main {
            display: flex;
            align-items: center;
            gap: 9px;
            min-width: 0;
        }

        .country-config-main input[type="checkbox"] {
            width: 15px;
            height: 15px;
            margin: 0;
            accent-color: #171a2b;
            cursor: pointer;
            flex: 0 0 auto;
        }

        .country-config-name {
            color: #34394f;
            font-family: monospace;
            font-size: 9px;
            font-weight: 700;
        }

        .country-config-description {
            margin-top: 2px;
            color: #969bb0;
            font-family: monospace;
            font-size: 7px;
        }

        .country-config-required {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #777d96;
            font-family: monospace;
            font-size: 7px;
            font-weight: 700;
            white-space: nowrap;
            text-transform: uppercase;
        }

        .country-config-required input[type="checkbox"] {
            width: 14px;
            height: 14px;
            margin: 0;
            accent-color: #171a2b;
            cursor: pointer;
        }

        .country-form-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 9px;
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid #edf0f6;
        }

        .country-form-submit {
            min-height: 38px;
            padding: 0 15px;
            border: 0;
            border-radius: 8px;
            background: #171a2b;
            color: #ffffff;
            font-family: monospace;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .04em;
            cursor: pointer;
            text-transform: uppercase;
        }

        .country-form-submit:hover {
            background: #252a41;
        }

        @media (max-width: 800px) {

            .country-config-grid {
                grid-template-columns: 1fr;
            }

        }

        @media (max-width: 700px) {

            .country-form-header {
                flex-direction: column;
            }

            .country-form-actions {
                flex-direction: column;
                align-items: stretch;
            }

        }
    </style>


    <div class="country-form-page">

        {{-- HEADER --}}

        <div class="country-form-header">

            <div>

                <div class="country-form-kicker">
                    DYSON LATAM / ADMINISTRATION / CATALOGS
                </div>

                <h1 class="country-form-title">
                    Edit Country
                </h1>

                <p class="country-form-subtitle">
                    Configure the NPD workflow for this country
                </p>

            </div>

            <a href="{{ route('countries.index') }}" class="country-back-link">
                ← Back to Country
            </a>

        </div>


        {{-- FORM CARD --}}

        <div class="country-form-card">

            <form action="{{ route('countries.update', $country) }}" method="POST">

                @csrf
                @method('PUT')


                {{-- COUNTRY INFORMATION --}}

                <div class="country-form-section">

                    <h2 class="country-form-section-title">
                        Country Information
                    </h2>

                    <p class="country-form-section-description">
                        Country name used throughout the NPD project management system.
                    </p>

                    <div class="country-form-field">

                        <label for="name" class="country-form-label">
                            Country Name
                        </label>

                        <input type="text" id="name" name="name" class="country-form-input"
                            value="{{ old('name', $country->name) }}" maxlength="255" required>

                        @error('name')
                            <div class="country-form-error">
                                {{ $message }}
                            </div>
                        @enderror

                    </div>

                </div>


                {{-- PROJECT STAGES --}}

                <div class="country-form-section">

                    <h2 class="country-form-section-title">
                        Project Stages
                    </h2>

                    <p class="country-form-section-description">
                        Select the stages that apply to projects created for this country.
                    </p>

                    <div class="country-config-grid">

                        @foreach ($availableStages as $stageKey => $stageName)
                            @php
                                $stageSelected = in_array($stageKey, old('stages', $configuredStages), true);
                            @endphp

                            <div class="country-config-card">

                                <div class="country-config-card-header">

                                    <h3 class="country-config-card-title">
                                        {{ $stageName }}
                                    </h3>

                                </div>

                                <div class="country-config-list">

                                    <label class="country-config-row">

                                        <div class="country-config-main">

                                            <input type="checkbox" name="stages[]" value="{{ $stageKey }}"
                                                {{ $stageSelected ? 'checked' : '' }}>

                                            <div>

                                                <div class="country-config-name">
                                                    {{ $stageName }}
                                                </div>

                                                <div class="country-config-description">
                                                    {{ $stageKey }}
                                                </div>

                                            </div>

                                        </div>

                                    </label>

                                </div>

                            </div>
                        @endforeach

                    </div>

                    @error('stages')
                        <div class="country-form-error">
                            {{ $message }}
                        </div>
                    @enderror

                    @error('stages.*')
                        <div class="country-form-error">
                            {{ $message }}
                        </div>
                    @enderror

                </div>


                {{-- CERTIFICATIONS --}}

                <div class="country-form-section">

                    <h2 class="country-form-section-title">
                        Certifications
                    </h2>

                    <p class="country-form-section-description">
                        Select the certifications that apply. Mark a selected certification as Required when it is mandatory
                        for the country.
                    </p>

                    <div class="country-config-card">

                        <div class="country-config-card-header">

                            <h3 class="country-config-card-title">
                                Available Certifications
                            </h3>

                        </div>

                        <div class="country-config-list">

                            @foreach ($availableCertifications as $certification)
                                @php
                                    $configured = array_key_exists($certification, $configuredCertifications);

                                    $selectedCertifications = old(
                                        'certifications',
                                        array_keys($configuredCertifications),
                                    );

                                    $selectedRequiredCertifications = old(
                                        'required_certifications',
                                        array_keys(
                                            array_filter(
                                                $configuredCertifications,
                                                fn($required) => $required === true,
                                            ),
                                        ),
                                    );

                                    $certificationSelected = in_array($certification, $selectedCertifications, true);

                                    $certificationRequired = in_array(
                                        $certification,
                                        $selectedRequiredCertifications,
                                        true,
                                    );
                                @endphp

                                <div class="country-config-row">

                                    <div class="country-config-main">

                                        <input type="checkbox" name="certifications[]" value="{{ $certification }}"
                                            class="certification-toggle" data-target="required-{{ md5($certification) }}"
                                            {{ $certificationSelected ? 'checked' : '' }}>

                                        <div>

                                            <div class="country-config-name">
                                                {{ $certification }}
                                            </div>

                                        </div>

                                    </div>


                                    <label class="country-config-required">

                                        <input type="checkbox" name="required_certifications[]"
                                            value="{{ $certification }}" id="required-{{ md5($certification) }}"
                                            {{ $certificationRequired ? 'checked' : '' }}
                                            {{ $certificationSelected ? '' : 'disabled' }}>

                                        Required

                                    </label>

                                </div>
                            @endforeach

                        </div>

                    </div>

                    @error('certifications')
                        <div class="country-form-error">
                            {{ $message }}
                        </div>
                    @enderror

                    @error('certifications.*')
                        <div class="country-form-error">
                            {{ $message }}
                        </div>
                    @enderror

                    @error('required_certifications.*')
                        <div class="country-form-error">
                            {{ $message }}
                        </div>
                    @enderror

                </div>


                {{-- ACTIONS --}}

                <div class="country-form-actions">

                    <a href="{{ route('countries.index') }}" class="country-back-link">
                        Cancel
                    </a>

                    <button type="submit" class="country-form-submit">
                        Update Country
                    </button>

                </div>

            </form>

        </div>

    </div>


    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {

                document.querySelectorAll('.certification-toggle').forEach(function(checkbox) {

                    checkbox.addEventListener('change', function() {

                        const target = document.getElementById(
                            this.dataset.target
                        );

                        if (!target) {
                            return;
                        }

                        target.disabled = !this.checked;

                        if (!this.checked) {
                            target.checked = false;
                        }

                    });

                });

            });
        </script>
    @endpush

@endsection