@extends('chauffeur.layouts.app')

@section('title', __('chauffeur.profile'))

@section('styles')
    <style>
        .sm-avatar-row { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
        .sm-avatar-preview {
            width: 96px; height: 96px; border-radius: 50%;
            object-fit: cover; border: 2px solid #C3AD66;
        }
#locale { border: 1px solid lightgrey; }

.gamme-family { margin-bottom: 18px; }
        .gamme-family-title {
            font-weight: 700; color: #111; font-size: 13px;
            text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
        }
        .gamme-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 16px; }
        .gamme-row {
            display: flex; align-items: center; gap: 10px;
            padding: 8px 12px; border: 1px solid #eee; border-radius: 10px;
            background: #fafafa; cursor: pointer; user-select: none;
        }
        .gamme-row:hover { border-color: #d8cfa8; }
        .gamme-row.is-on { border-color: #C3AD66; background: #fbf9f0; }
        .gamme-row input { width: 16px; height: 16px; accent-color: #C3AD66; margin: 0; }
        .gamme-name { font-weight: 600; color: #333; }
        .gamme-example { display: block; font-size: 12px; color: #999; font-weight: 400; }

        .gamme-cell { display: flex; flex-direction: column; }

        /* Tarifs : révélés seulement quand la gamme est cochée. */
        .gamme-prices {
            display: none;
            gap: 8px;
            margin: 6px 0 0 12px;
            padding-left: 12px;
            border-left: 2px solid #C3AD66;
        }
        .gamme-cell.is-on .gamme-prices { display: flex; flex-wrap: wrap; }
        .gamme-prices label {
            flex: 1 1 110px;
            display: flex;
            flex-direction: column;
            gap: 3px;
            font-size: 12px;
            color: #777;
            margin: 0;
            cursor: default;
        }
        .gamme-prices input {
            width: 100%;
            padding: 6px 8px;
            border: 1px solid #e2e2e2;
            border-radius: 8px;
            font-size: 13px;
        }
        .gamme-prices input:focus { outline: none; border-color: #C3AD66; }
        .gamme-prices .input-error { flex: 1 1 100%; }

        .doc-block { margin-top: 12px; }
        .doc-block[hidden] { display: none; }
        .doc-hint { font-size: 12px; color: #999; margin-top: 4px; }
    </style>
@endsection

@section('content')
    <div class="sm-page">
        <div class="sm-card">
            <h3>{{ __('chauffeur.profile') }}</h3>
            <p class="sm-lead">{{ __('chauffeur.profile_intro') }}</p>

            @if(session('success'))
                <div class="sm-alert-success">{{ session('success') }}</div>
            @endif

            @if($errors->any())
                <div class="sm-alert-error">
                    <ul>
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('chauffeur.profile.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="sm-avatar-row">
                    <img id="sm-avatar-preview"
                         class="sm-avatar-preview"
                         src="{{ $user->photo ? asset('storage/' . $user->photo) : asset('vendor/images/avatar/user-2.svg') }}"
                         alt="{{ $user->name }}">

                    <div class="sm-field" style="flex:1;">
                        <label for="photo">{{ __('chauffeur.photo') }}</label>
                        <input type="file" id="photo" name="photo"
                               accept="image/*"
                               data-image-convert
                               data-max-side="1600">
                        <span class="sm-hint">{{ __('chauffeur.photo_hint') }}</span>
                        <span class="sm-hint" id="sm-photo-converted" style="display:none;color:#2c6b3f;"></span>
                    </div>
                </div>

                <div class="sm-grid">
                    <div class="sm-field">
                        <label for="first_name">{{ __('chauffeur.first_name') }}</label>
                        <input type="text" id="first_name" name="first_name" value="{{ old('first_name', $user->first_name) }}">
                    </div>

                    <div class="sm-field">
                        <label for="last_name">{{ __('chauffeur.last_name') }}</label>
                        <input type="text" id="last_name" name="last_name" value="{{ old('last_name', $user->last_name) }}">
                    </div>

                    <div class="sm-field">
                        <label for="email">{{ __('chauffeur.email') }}</label>
                        <input type="email" id="email" name="email" value="{{ old('email', $user->email) }}" required>
                    </div>

                    <div class="sm-field">
                        <label for="phone">{{ __('chauffeur.phone') }}</label>
                        <input type="tel" id="phone" name="phone" value="{{ old('phone', $user->phone) }}">
                    </div>

                    <div class="sm-field full">
                        <label for="address">{{ __('chauffeur.address') }}</label>
                        <input type="text" id="address" name="address" value="{{ old('address', $user->address) }}">
                    </div>

                    <div class="sm-field">
                        <label for="postal_code">{{ __('chauffeur.postal_code') }}</label>
                        <input type="text" id="postal_code" name="postal_code" value="{{ old('postal_code', $user->postal_code) }}">
                    </div>

                    <div class="sm-field">
                        <label for="city">{{ __('chauffeur.city') }}</label>
                        <input type="text" id="city" name="city" value="{{ old('city', $user->city) }}">
                    </div>

                    <div class="sm-field">
                        <label for="country">{{ __('chauffeur.country') }}</label>
                        <input type="text" id="country" name="country" value="{{ old('country', $user->country) }}">
                    </div>

                    <div class="sm-field">
                        <label for="locale">{{ __('chauffeur.language') }}</label>
                        @include('chauffeur.partials.locale-select', ['value' => $user->locale])
                        @error('locale')<span class="input-error">{{ $message }}</span>@enderror
                    </div>

                    <div class="sm-field">
                        <label for="license_number">{{ __('chauffeur.license_number') }}</label>
                        <input type="text" id="license_number" name="license_number" value="{{ old('license_number', $user->license_number) }}">
                    </div>

                    <div class="sm-field">
                        <label for="vehicle_model">{{ __('chauffeur.vehicle_model') }}</label>
                        <input type="text" id="vehicle_model" name="vehicle_model" value="{{ old('vehicle_model', $user->vehicle_model) }}">
                    </div>

                    <div class="sm-field">
                        <label for="vehicle_plate">{{ __('chauffeur.vehicle_plate') }}</label>
                        <input type="text" id="vehicle_plate" name="vehicle_plate" value="{{ old('vehicle_plate', $user->vehicle_plate) }}" maxlength="20">
                    </div>
                </div>

                {{-- Gammes proposées et justificatifs. Mêmes règles qu'à
                     l'inscription : le serveur les revalide à chaque envoi. --}}
                @php $currentRanges = (array) old('ranges', $user->ranges ?? []); @endphp

                <h4 style="margin-top:26px;">{{ __('chauffeur.register_ranges') }}</h4>
                <p class="doc-hint">{{ __('chauffeur.register_ranges_hint') }}</p>

                <div id="chauffeur-ranges">
                    @foreach(config('chauffeur-ranges.families') as $familyKey => $family)
                        <div class="gamme-family">
                            <div class="gamme-family-title">{{ __($family['label']) }}</div>

                            <div class="gamme-items">
                                @foreach($family['ranges'] as $rangeKey => $range)
                                    <div class="gamme-cell {{ in_array($rangeKey, $currentRanges) ? 'is-on' : '' }}">
                                        <label class="gamme-row {{ in_array($rangeKey, $currentRanges) ? 'is-on' : '' }}">
                                            <input type="checkbox" name="ranges[]" value="{{ $rangeKey }}"
                                                   class="gamme-input"
                                                   data-license="{{ !empty($range['license']) ? 1 : 0 }}"
                                                   data-bsr="{{ in_array('bsr', $range['documents'] ?? []) ? 1 : 0 }}"
                                                   @checked(in_array($rangeKey, $currentRanges))>
                                            <span class="gamme-name">
                                                {{ isset($range['emoji']) ? $range['emoji'] . ' ' : '' }}{{ __('chauffeur.range_' . $rangeKey) }}
                                                @if(isset($range['example']))
                                                    <span class="gamme-example">
                                                        {{ $range['example'] }} · {{ $range['seats'] }} {{ __('chauffeur.seats') }}
                                                    </span>
                                                @endif
                                            </span>
                                        </label>

                                        <div class="gamme-prices">
                                            <label>
                                                <span>{{ __('chauffeur.price_per_km') }}</span>
                                                <input type="number" step="0.01" min="0"
                                                       name="prices[{{ $rangeKey }}][km]"
                                                       value="{{ old('prices.' . $rangeKey . '.km', $user->priceFor($rangeKey)['km']) }}"
                                                       placeholder="0.00">
                                            </label>

                                            <label>
                                                <span>{{ __('chauffeur.price_per_minute') }}</span>
                                                <input type="number" step="0.01" min="0"
                                                       name="prices[{{ $rangeKey }}][minute]"
                                                       value="{{ old('prices.' . $rangeKey . '.minute', $user->priceFor($rangeKey)['minute']) }}"
                                                       placeholder="0.00">
                                            </label>

                                            @error('prices.' . $rangeKey)
                                                <span class="input-error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>

                @error('ranges')<span class="input-error">{{ $message }}</span>@enderror

                <h4 style="margin-top:26px;">{{ __('chauffeur.register_documents') }}</h4>

                @php
                    $documents = [
                        'license_photo' => ['label' => 'chauffeur.license_photo', 'id' => 'doc-license'],
                        'vtc_card' => ['label' => 'chauffeur.vtc_card', 'id' => 'doc-vtc'],
                        'bsr_document' => ['label' => 'chauffeur.bsr_document', 'id' => 'doc-bsr'],
                    ];
                @endphp

                <div class="doc-block">
                    <label class="gamme-row" style="max-width:420px;">
                        <input type="checkbox" id="is_vtc" name="is_vtc" value="1" @checked(old('is_vtc', $user->is_vtc))>
                        <span class="gamme-name">{{ __('chauffeur.is_vtc') }}</span>
                    </label>
                </div>

                @foreach($documents as $field => $document)
                    <div class="doc-block" id="{{ $document['id'] }}">
                        @include('chauffeur.partials.file-field', [
                            'name' => $field,
                            'label' => __($document['label']),
                            'hint' => $field === 'bsr_document' ? __('chauffeur.bsr_hint') : __('chauffeur.document_hint'),
                            'existing' => $user->{$field} ? route('chauffeur.document', $field) : null,
                            'existingType' => pathinfo($user->{$field} ?? '', PATHINFO_EXTENSION),
                        ])
                    </div>
                @endforeach

                <div class="sm-actions">
                    <button class="rts-btn btn-primary">{{ __('chauffeur.save') }}</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    @include('chauffeur.partials.file-field-assets')

    <script src="{{ asset('js/image-upload-converter.js') }}"></script>

    <script>
        const smPhotoInput = document.getElementById('photo');
        const smConverted = document.getElementById('sm-photo-converted');

        smPhotoInput?.addEventListener('image-converted', function (e) {
            const mo = n => (n / 1048576).toFixed(1);

            smConverted.textContent = @json(__('chauffeur.photo_optimised'))
                .replace(':from', mo(e.detail.from)).replace(':to', mo(e.detail.to));
            smConverted.style.display = 'block';

            smPreview(smPhotoInput.files[0]);
        });

        function smPreview(file) {
            if (file) document.getElementById('sm-avatar-preview').src = URL.createObjectURL(file);
        }

        smPhotoInput?.addEventListener('change', function (e) {
            smConverted.style.display = 'none';
            smPreview(e.target.files[0]);
        });
    </script>

<script>
        (function () {
            const inputs = Array.from(document.querySelectorAll('.gamme-input'));
            const licenseBlock = document.getElementById('doc-license');
            const bsrBlock = document.getElementById('doc-bsr');
            const vtcCheckbox = document.getElementById('is_vtc');
            const vtcBlock = document.getElementById('doc-vtc');

            function refresh() {
                const checked = inputs.filter(function (i) { return i.checked; });

                licenseBlock.hidden = !checked.some(function (i) { return i.dataset.license === '1'; });
                bsrBlock.hidden = !checked.some(function (i) { return i.dataset.bsr === '1'; });
                vtcBlock.hidden = !vtcCheckbox.checked;

                inputs.forEach(function (i) {
                    i.closest('.gamme-row').classList.toggle('is-on', i.checked);
                    i.closest('.gamme-cell').classList.toggle('is-on', i.checked);
                });
                vtcCheckbox.closest('.gamme-row').classList.toggle('is-on', vtcCheckbox.checked);
            }

            inputs.forEach(function (i) { i.addEventListener('change', refresh); });
            vtcCheckbox.addEventListener('change', refresh);
            refresh();
        })();
    </script>

@endsection