@extends('digitalmenu::layouts.app')

@section('title', 'Shop Settings | Merchant Central')

@section('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css"/>
<style>
    .kinetic-gradient { background: linear-gradient(135deg, #b81311 0%, #dc3128 100%); }
</style>
@endsection

@section('content')
<div class="max-w-4xl mx-auto pb-24">

    <div class="mb-10">
        <h1 class="font-display text-4xl md:text-5xl font-extrabold text-on-surface tracking-tight leading-tight">Shop Setting</h1>
        <p class="font-body text-on-surface-variant mt-3 text-lg max-w-2xl">Manage your store's identity, contact information, and operating hours.</p>
    </div>

    <form method="POST" action="{{ route('digitalmenu.setting.update') }}">
        {!! csrf_field() !!}

        @if ($errors->any())
            <div class="mb-6 flex items-start gap-3 bg-error-container border border-error/20 text-error px-5 py-4 rounded-xl text-sm font-medium">
                <span class="material-symbols-outlined text-error text-xl mt-0.5">error</span>
                <ul class="list-disc list-inside space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="space-y-8">

            {{-- Shop Information --}}
            <section class="bg-surface-container-lowest rounded-xl p-8 shadow-[0px_12px_32px_rgba(25,28,29,0.06)] relative overflow-hidden group">
                <div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
                <h3 class="font-headline text-xl font-bold text-on-surface mb-6 flex items-center gap-2">
                    <span class="material-symbols-outlined text-primary">store</span>
                    Shop Information
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 relative z-10">
                    <div class="space-y-2">
                        <label class="block text-sm font-semibold text-on-surface-variant" for="name">Shop Name <span class="text-error">*</span></label>
                        <input id="name" name="name" type="text" maxlength="100"
                               value="{{ old('name', $shop->name) }}"
                               placeholder="My Awesome Shop"
                               class="w-full bg-surface-container-high border-none rounded-lg px-4 py-3 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-2 focus:ring-primary focus:bg-surface-container-lowest transition-all outline-none {{ $errors->has('name') ? 'ring-2 ring-error' : '' }}"/>
                        @if ($errors->has('name'))
                            <p class="text-error text-xs mt-1">{{ $errors->first('name') }}</p>
                        @endif
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-semibold text-on-surface-variant" for="phone_number">Business Contact</label>
                        @include('digitalmenu::partials.phone_country_selector', [
                            'fieldName' => 'business_contact',
                            'phoneValue' => old('business_contact', $shop->business_contact),
                        ])
                        @if ($errors->has('business_contact'))
                            <p class="text-error text-xs mt-1">{{ $errors->first('business_contact') }}</p>
                        @endif
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-semibold text-on-surface-variant">Currency</label>
                        @include('digitalmenu::partials.currency_selector', [
                            'selectedId' => old('currency_id', $shop->currency_id),
                        ])
                        @if ($errors->has('currency_id'))
                            <p class="text-error text-xs mt-1">{{ $errors->first('currency_id') }}</p>
                        @endif
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-semibold text-on-surface-variant" for="website">Website</label>
                        <input id="website" name="website" type="url" maxlength="100"
                               value="{{ old('website', $shop->website) }}"
                               placeholder="https://myshop.com"
                               class="w-full bg-surface-container-high border-none rounded-lg px-4 py-3 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-2 focus:ring-primary focus:bg-surface-container-lowest transition-all outline-none {{ $errors->has('website') ? 'ring-2 ring-error' : '' }}"/>
                        @if ($errors->has('website'))
                            <p class="text-error text-xs mt-1">{{ $errors->first('website') }}</p>
                        @endif
                    </div>
                    <div class="space-y-2 md:col-span-2">
                        <label class="block text-sm font-semibold text-on-surface-variant" for="short_description">Description</label>
                        <textarea id="short_description" name="short_description"
                               maxlength="300"
                               placeholder="A brief description of your shop…"
                               class="w-full bg-surface-container-high border-none rounded-lg px-4 py-3 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-2 focus:ring-primary focus:bg-surface-container-lowest transition-all outline-none resize-none {{ $errors->has('short_description') ? 'ring-2 ring-error' : '' }}" rows="3">{{ old('short_description', $shop->short_description) }}</textarea>
                        <p class="text-xs text-on-surface-variant/50 text-right -mt-1"><span id="short_description_count">{{ strlen(old('short_description', $shop->short_description ?? '')) }}</span>/300</p>
                        @if ($errors->has('short_description'))
                            <p class="text-error text-xs mt-1">{{ $errors->first('short_description') }}</p>
                        @endif
                    </div>

                    {{-- Business Type --}}
                    <div class="space-y-2 md:col-span-2">
                        <label class="block text-sm font-semibold text-on-surface-variant">Business Type <span class="text-error">*</span></label>
                        <div class="grid grid-cols-2 gap-3 max-w-sm">
                            <label class="relative cursor-pointer">
                                <input type="radio" name="shop_type" value="food_and_drink" class="sr-only peer"
                                       {{ old('shop_type', $shopType) === 'food_and_drink' ? 'checked' : '' }}>
                                <div class="flex flex-col items-center gap-2 px-4 py-4 rounded-xl border-2 border-surface-container-high bg-surface-container-high peer-checked:border-primary peer-checked:bg-primary/5 transition-all duration-200">
                                    <span class="material-symbols-outlined text-3xl text-on-surface-variant peer-checked:text-primary">restaurant</span>
                                    <span class="text-sm font-semibold text-on-surface-variant peer-checked:text-primary text-center leading-tight">Food &amp; Drink</span>
                                </div>
                            </label>
                            <label class="relative cursor-pointer">
                                <input type="radio" name="shop_type" value="retailer" class="sr-only peer"
                                       {{ old('shop_type', $shopType) === 'retailer' ? 'checked' : '' }}>
                                <div class="flex flex-col items-center gap-2 px-4 py-4 rounded-xl border-2 border-surface-container-high bg-surface-container-high peer-checked:border-primary peer-checked:bg-primary/5 transition-all duration-200">
                                    <span class="material-symbols-outlined text-3xl text-on-surface-variant peer-checked:text-primary">storefront</span>
                                    <span class="text-sm font-semibold text-on-surface-variant peer-checked:text-primary text-center leading-tight">Retailer</span>
                                </div>
                            </label>
                        </div>
                        @if ($errors->has('shop_type'))
                            <p class="text-error text-xs mt-1">{{ $errors->first('shop_type') }}</p>
                        @endif
                    </div>
                </div>
            </section>

            {{-- Business Hours --}}
            <section class="bg-surface-container-lowest rounded-xl p-8 shadow-[0px_12px_32px_rgba(25,28,29,0.06)] relative overflow-hidden group">
                <div class="absolute inset-0 bg-gradient-to-bl from-tertiary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
                <h3 class="font-headline text-xl font-bold text-on-surface mb-2 flex items-center gap-2">
                    <span class="material-symbols-outlined text-tertiary">schedule</span>
                    Business Hours
                </h3>
                <p class="text-sm text-on-surface-variant mb-6">Set the open and close time for each day of the week.</p>

                @php
                    $days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
                    $dayIcons = [
                        'Monday'    => 'looks_one',
                        'Tuesday'   => 'looks_two',
                        'Wednesday' => 'looks_3',
                        'Thursday'  => 'looks_4',
                        'Friday'    => 'looks_5',
                        'Saturday'  => 'looks_6',
                        'Sunday'    => 'looks_7',
                    ];
                    $weekendDays = ['Saturday', 'Sunday'];
                @endphp

                {{-- Column headers --}}
                <div class="hidden md:grid grid-cols-[1fr_1fr_1fr] gap-4 mb-3 px-4">
                    <span class="text-xs font-bold uppercase tracking-widest text-on-surface-variant">Day</span>
                    <span class="text-xs font-bold uppercase tracking-widest text-on-surface-variant">Open Hour</span>
                    <span class="text-xs font-bold uppercase tracking-widest text-on-surface-variant">Close Hour</span>
                </div>

                <div class="space-y-2 relative z-10">
                    @foreach($days as $index => $day)
                        @php
                            $savedHour  = $businessHours->get($day);
                            $savedOpen  = old("business_hour.open_hour.$index",  $savedHour ? $savedHour->open_hour  : '08:00');
                            $savedClose = old("business_hour.close_hour.$index", $savedHour ? $savedHour->close_hour : '22:00');
                            $isWeekend  = in_array($day, $weekendDays);
                        @endphp
                        <div class="grid grid-cols-1 md:grid-cols-[1fr_1fr_1fr] gap-3 items-center
                                    rounded-xl px-4 py-3
                                    {{ $isWeekend ? 'bg-surface-container' : 'bg-surface-container-low' }}">

                            {{-- Day label --}}
                            <div class="flex items-center gap-2">
                                <span class="material-symbols-outlined text-sm {{ $isWeekend ? 'text-secondary' : 'text-tertiary' }}"
                                      style="font-variation-settings: 'FILL' 1;">
                                    {{ $isWeekend ? 'weekend' : 'work' }}
                                </span>
                                <span class="font-semibold text-sm text-on-surface {{ $isWeekend ? 'text-secondary' : '' }}">
                                    {{ $day }}
                                </span>
                                @if($isWeekend)
                                    <span class="text-[10px] font-bold px-2 py-0.5 rounded-full bg-secondary-container text-on-secondary-container uppercase tracking-wide">Weekend</span>
                                @endif
                            </div>

                            {{-- Open Hour --}}
                            <div class="flex flex-col gap-1">
                                <label class="md:hidden text-xs font-semibold text-on-surface-variant">Open Hour</label>
                                <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-on-surface-variant/50 text-base pointer-events-none"
                                          style="font-variation-settings: 'FILL' 0;">sunny</span>
                                    <select name="business_hour[open_hour][{{ $index }}]"
                                            class="w-full pl-9 pr-4 py-2.5 bg-surface-container-lowest border border-outline-variant/30
                                                   rounded-lg text-sm text-on-surface focus:ring-2 focus:ring-primary focus:border-transparent
                                                   transition-all outline-none appearance-none cursor-pointer">
                                        @for($h = 0; $h < 24; $h++)
                                            @for($m = 0; $m < 60; $m += 30)
                                                @php $timeVal = sprintf('%02d:%02d', $h, $m); @endphp
                                                <option value="{{ $timeVal }}" {{ $savedOpen === $timeVal ? 'selected' : '' }}>
                                                    {{ $timeVal }}
                                                </option>
                                            @endfor
                                        @endfor
                                    </select>
                                    <span class="absolute right-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-on-surface-variant/50 text-sm pointer-events-none">expand_more</span>
                                </div>
                            </div>

                            {{-- Close Hour --}}
                            <div class="flex flex-col gap-1">
                                <label class="md:hidden text-xs font-semibold text-on-surface-variant">Close Hour</label>
                                <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-on-surface-variant/50 text-base pointer-events-none"
                                          style="font-variation-settings: 'FILL' 0;">bedtime</span>
                                    <select name="business_hour[close_hour][{{ $index }}]"
                                            class="w-full pl-9 pr-4 py-2.5 bg-surface-container-lowest border border-outline-variant/30
                                                   rounded-lg text-sm text-on-surface focus:ring-2 focus:ring-primary focus:border-transparent
                                                   transition-all outline-none appearance-none cursor-pointer">
                                        @for($h = 0; $h < 24; $h++)
                                            @for($m = 0; $m < 60; $m += 30)
                                                @php $timeVal = sprintf('%02d:%02d', $h, $m); @endphp
                                                <option value="{{ $timeVal }}" {{ $savedClose === $timeVal ? 'selected' : '' }}>
                                                    {{ $timeVal }}
                                                </option>
                                            @endfor
                                        @endfor
                                    </select>
                                    <span class="absolute right-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-on-surface-variant/50 text-sm pointer-events-none">expand_more</span>
                                </div>
                            </div>

                        </div>
                    @endforeach
                </div>
            </section>

            {{-- Shop Identity (Logo) --}}
            <section class="bg-surface-container-lowest rounded-xl p-8 shadow-[0px_12px_32px_rgba(25,28,29,0.06)] relative overflow-hidden group">
                <div class="absolute inset-0 bg-gradient-to-tr from-secondary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
                <h3 class="font-headline text-xl font-bold text-on-surface mb-6 flex items-center gap-2">
                    <span class="material-symbols-outlined text-secondary">image</span>
                    Shop Identity
                </h3>
                <div class="relative z-10">
                    <label class="block text-sm font-semibold text-on-surface-variant mb-4">Shop Logo</label>
                    <div class="flex flex-col md:flex-row items-center gap-8">

                        <div class="w-32 h-32 rounded-xl bg-surface-container-low flex items-center justify-center overflow-hidden border border-outline-variant/30 shadow-inner relative flex-shrink-0">
                            @if ($shop->logo)
                                <img id="logo-preview"
                                     src="{{ config('global.s3_path') . 'shop/' . $shop->logo }}"
                                     alt="Shop Logo"
                                     class="w-full h-full object-cover"/>
                            @else
                                <img id="logo-preview" src="" alt="Shop Logo" class="w-full h-full object-cover hidden"/>
                                <span class="material-symbols-outlined text-on-surface-variant opacity-40 text-4xl" id="logo-placeholder">storefront</span>
                            @endif
                        </div>

                        <div id="logo-drop-zone"
                             class="flex-1 w-full border-2 border-dashed border-outline-variant/50 rounded-xl p-8 text-center hover:border-primary transition-colors hover:bg-primary-fixed/10 cursor-pointer flex flex-col items-center justify-center gap-3">
                            <div class="w-12 h-12 rounded-full bg-primary-fixed flex items-center justify-center text-primary">
                                <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">cloud_upload</span>
                            </div>
                            <div>
                                <p class="font-label font-semibold text-primary">Click to upload</p>
                                <p class="font-body text-xs text-on-surface-variant mt-1">PNG format only. Larger images will be cropped to 512x512 px (max 5 MB).</p>
                            </div>
                        </div>

                        <input type="file" id="logo-file-input" accept="image/*" class="hidden"/>
                        <input type="hidden" name="shop_logo_cropped" id="shop-logo-cropped"/>
                    </div>
                </div>
            </section>

            {{-- Actions --}}
            <div class="flex flex-col sm:flex-row items-center justify-end gap-4 pt-2">
                <a href="{{ route('digitalmenu.products.index') }}"
                   class="w-full sm:w-auto px-8 py-3 rounded-full font-label font-semibold text-on-surface hover:bg-surface-container-high transition-colors text-center">
                    Cancel
                </a>
                <button type="submit"
                        class="w-full sm:w-auto px-8 py-3 kinetic-gradient text-on-primary rounded-full font-label font-semibold shadow-[0px_12px_32px_rgba(25,28,29,0.06)] hover:scale-[1.02] transition-transform flex items-center justify-center gap-2">
                    <span class="material-symbols-outlined text-xl">save</span>
                    Save Settings
                </button>
            </div>

        </div>
    </form>
</div>

{{-- Crop Modal --}}
<div id="crop-modal" class="fixed inset-0 z-50 hidden items-center justify-center p-4 bg-scrim/60 backdrop-blur-sm">
    <div class="bg-surface-container-lowest rounded-2xl shadow-[0px_24px_64px_rgba(25,28,29,0.18)] w-full max-w-lg overflow-hidden">
        <div class="flex items-center justify-between px-6 py-4 border-b border-outline-variant/20">
            <h3 class="font-headline text-lg font-bold text-on-surface flex items-center gap-2">
                <span class="material-symbols-outlined text-secondary">crop</span>
                Crop Logo
            </h3>
            <button type="button" id="crop-cancel"
                    class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-surface-container-high transition-colors text-on-surface-variant">
                <span class="material-symbols-outlined text-xl">close</span>
            </button>
        </div>
        <div class="p-6">
            <p class="text-xs text-on-surface-variant mb-4">Drag to reposition &middot; Scroll to zoom &middot; Output will be 512 &times; 512 px PNG</p>
            <div class="bg-surface-container rounded-xl overflow-hidden" style="max-height:380px;">
                <img id="crop-image" src="" alt="" class="block max-w-full"/>
            </div>
        </div>
        <div class="flex justify-end gap-3 px-6 pb-6">
            <button type="button" id="crop-cancel-btn"
                    class="px-6 py-2.5 rounded-full font-label font-semibold text-on-surface hover:bg-surface-container-high transition-colors text-sm">
                Cancel
            </button>
            <button type="button" id="crop-save-btn"
                    class="px-6 py-2.5 kinetic-gradient text-on-primary rounded-full font-label font-semibold text-sm flex items-center gap-2 hover:scale-[1.02] transition-transform">
                <span class="material-symbols-outlined text-base">check</span>
                Crop &amp; Save
            </button>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
<script>
    // --- Description character counter ---
    const descTextarea = document.getElementById('short_description');
    const descCount    = document.getElementById('short_description_count');
    if (descTextarea && descCount) {
        descTextarea.addEventListener('input', () => {
            descCount.textContent = descTextarea.value.length;
        });
    }

    // --- Logo upload + crop ---
    const dropZone      = document.getElementById('logo-drop-zone');
    const fileInput     = document.getElementById('logo-file-input');
    const croppedInput  = document.getElementById('shop-logo-cropped');
    const preview       = document.getElementById('logo-preview');
    const placeholder   = document.getElementById('logo-placeholder');

    const cropModal     = document.getElementById('crop-modal');
    const cropImage     = document.getElementById('crop-image');
    const cropSaveBtn   = document.getElementById('crop-save-btn');
    const cropCancelBtn = document.getElementById('crop-cancel-btn');
    const cropCancelX   = document.getElementById('crop-cancel');

    let cropper = null;

    dropZone.addEventListener('click', () => fileInput.click());

    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('border-primary', 'bg-primary-fixed/10');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('border-primary', 'bg-primary-fixed/10');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('border-primary', 'bg-primary-fixed/10');
        if (e.dataTransfer.files[0]) openCropper(e.dataTransfer.files[0]);
    });

    fileInput.addEventListener('change', () => {
        if (fileInput.files[0]) openCropper(fileInput.files[0]);
    });

    function openCropper(file) {
        if (!file.type.startsWith('image/')) return;
        const reader = new FileReader();
        reader.onload = (ev) => {
            cropModal.classList.remove('hidden');
            cropModal.classList.add('flex');
            if (cropper) { cropper.destroy(); cropper = null; }
            // Clear src first so onload fires reliably even when re-using the element
            cropImage.src = '';
            cropImage.onload = function () {
                this.onload = null;
                cropper = new Cropper(this, {
                    aspectRatio: 1,
                    viewMode: 1,
                    autoCropArea: 0.8,
                    movable: true,
                    zoomable: true,
                    rotatable: false,
                    scalable: false,
                });
            };
            cropImage.src = ev.target.result;
        };
        reader.readAsDataURL(file);
    }

    function closeCropModal() {
        cropModal.classList.add('hidden');
        cropModal.classList.remove('flex');
        if (cropper) { cropper.destroy(); cropper = null; }
        fileInput.value = '';
    }

    cropCancelBtn.addEventListener('click', closeCropModal);
    cropCancelX.addEventListener('click', closeCropModal);

    cropSaveBtn.addEventListener('click', () => {
        if (!cropper) return;
        const canvas = cropper.getCroppedCanvas({ width: 512, height: 512 });
        if (!canvas) return;
        const dataUrl = canvas.toDataURL('image/png');
        croppedInput.value = dataUrl;
        // Tear down modal+cropper first, then update the preview so Cropper's
        // DOM cleanup cannot race with the src assignment on logo-preview.
        closeCropModal();
        const previewEl = document.getElementById('logo-preview');
        previewEl.src = dataUrl;
        previewEl.classList.remove('hidden');
        const ph = document.getElementById('logo-placeholder');
        if (ph) ph.classList.add('hidden');
    });
</script>
@endsection