<x-app-layout>
    @php
        // Determine mode and action
        $isEditMode = isset($shop) && $shop;
        $title = $isEditMode ? 'Edit Your Shop Details' : 'Register Your Shop';
        $formAction = $isEditMode ? route('seller.shop.update') : route('seller.shop.store');
        $buttonText = $isEditMode ? 'Save Changes' : 'Register Shop & Start Selling';
    @endphp

    <div class="container-fluid p-0">
        <!-- Header Section -->
        <div class="bg-dark text-white p-4 rounded-bottom-4 shadow-sm">
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="mb-0 fw-bold">{{ __($title) }}</h2>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#E2712F" viewBox="0 0 16 16">
                    <path d="M2.97 1.35A1 1 0 0 1 3.73 1h8.54a1 1 0 0 1 .76.35l2.609 3.044A1.5 1.5 0 0 1 16 5.37v.255a2.375 2.375 0 0 1-4.25 1.458A2.371 2.371 0 0 1 9.875 8 2.37 2.37 0 0 1 8 7.083 2.37 2.37 0 0 1 6.125 8a2.37 2.37 0 0 1-1.875-.917A2.375 2.375 0 0 1 0 5.625V5.37a1.5 1.5 0 0 1 .361-.976l2.61-3.045zm1.78 4.275a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 1 0 2.75 0V5.37a.5.5 0 0 0-.12-.325L12.27 2H3.73L1.12 5.045A.5.5 0 0 0 1 5.37v.255a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0zM1.5 8.5A.5.5 0 0 1 2 9v6h12V9a.5.5 0 0 1 1 0v6h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1V9a.5.5 0 0 1 .5-.5zm2 .5a.5.5 0 0 1 .5.5V13h8V9.5a.5.5 0 0 1 1 0V13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.5a.5.5 0 0 1 .5-.5z"/>
                </svg>
            </div>
        </div>

        <!-- Main Form Card -->
        <div class="card border-0 shadow-lg rounded-top-4 mt-4 mx-3" style="position: relative; z-index: 1000;">
            <div class="card-body p-4">
                <p class="text-muted mb-4">{{ $isEditMode ? 'Update your shop information below.' : 'Complete your shop details to start selling.' }}</p>

                <form method="POST" action="{{ $formAction }}" enctype="multipart/form-data">
                    @csrf
                    @if ($isEditMode)
                        @method('PUT') <!-- Required for Laravel PUT/PATCH routes -->
                    @endif
                    
                    <!-- Business Information Section -->
                    <div class="mb-5">
                        <div class="d-flex align-items-center mb-3">
                            <div class="bg-success rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16">
                                    <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/>
                                </svg>
                            </div>
                            <h4 class="mb-0 fw-bold text-dark">Business Information</h4>
                        </div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="name" class="form-label fw-bold small text-muted">Shop Name</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white border-end-0">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#E2712F" viewBox="0 0 16 16">
                                            <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H4z"/>
                                            <path d="M5.5 5.5A.5.5 0 0 1 6 5h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5zM6 7a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1H6z"/>
                                        </svg>
                                    </span>
                                    <input id="name" type="text" name="name" value="{{ $shop->name ?? old('name') }}" required autofocus class="form-control border-start-0 ps-0">
                                </div>
                                @error('name') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="tagline" class="form-label fw-bold small text-muted">Tagline (Short Description)</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white border-end-0">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#E2712F" viewBox="0 0 16 16">
                                            <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2z"/>
                                            <path d="M4 5.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8zm0 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"/>
                                        </svg>
                                    </span>
                                    <input id="tagline" type="text" name="tagline" value="{{ $shop->tagline ?? old('tagline') }}" class="form-control border-start-0 ps-0">
                                </div>
                                @error('tagline') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="contact_phone" class="form-label fw-bold small text-muted">Contact Phone</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white border-end-0">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#E2712F" viewBox="0 0 16 16">
                                            <path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
                                            <path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
                                        </svg>
                                    </span>
                                    <input id="contact_phone" type="text" name="contact_phone" value="{{ $shop->contact_phone ?? old('contact_phone') }}" required class="form-control border-start-0 ps-0">
                                </div>
                                @error('contact_phone') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Location Section -->
                    <div class="mb-5">
                        <div class="d-flex align-items-center mb-3">
                            <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16">
                                    <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
                                </svg>
                            </div>
                            <h4 class="mb-0 fw-bold text-dark">Location</h4>
                        </div>

                        <div class="row g-3">
                            <div class="col-12">
                                <label for="address_line_1" class="form-label fw-bold small text-muted">Address Line 1</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white border-end-0">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#E2712F" viewBox="0 0 16 16">
                                            <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
                                            <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                                        </svg>
                                    </span>
                                    <input id="address_line_1" type="text" name="address_line_1" value="{{ $shop->address_line_1 ?? old('address_line_1') }}" required class="form-control border-start-0 ps-0">
                                </div>
                                @error('address_line_1') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-4">
                                <label for="city" class="form-label fw-bold small text-muted">City</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light border-end-0">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#E2712F" viewBox="0 0 16 16">
                                            <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
                                        </svg>
                                    </span>
                                    <input id="city" type="text" name="city" value="{{ $shop->city ?? old('city') }}" required readonly class="form-control border-start-0 ps-0 bg-light">
                                </div>
                                @error('city') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-4">
                                <label for="state" class="form-label fw-bold small text-muted">State/Province</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light border-end-0">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#E2712F" viewBox="0 0 16 16">
                                            <path d="M7.5 1.906v.938h1v-.938h-1zm0 1.875v.938h1V3.78h-1zm0 1.875v.938h1v-.938h-1zM1.906 8.5h.938v-1h-.938v1zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938v1zm2.813 0v-.031H8.5V7.53h-.938V7.5H7.53v.031H7.5v.938h.031V8.5h.938zm0 0h.938v-1h-.938v1zm1.875 0h.938v-1h-.938v1zm1.875 0h.938v-1h-.938v1zM7.5 9.406v.938h1v-.938h-1zm0 1.875v.938h1v-.938h-1zm0 1.875v.938h1v-.938h-1z"/>
                                            <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm1 0v14h14V1H1z"/>
                                        </svg>
                                    </span>
                                    <input id="state" type="text" name="state" value="{{ $shop->state ?? old('state') }}" required readonly class="form-control border-start-0 ps-0 bg-light">
                                </div>
                                @error('state') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-4">
                                <label for="zip_code" class="form-label fw-bold small text-muted">Zip/Postal Code</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light border-end-0">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#E2712F" viewBox="0 0 16 16">
                                            <path d="M6.5 7.5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v.938l.4 1.599a1 1 0 0 1-.416 1.074l-.93.62a1 1 0 0 1-1.109 0l-.93-.62a1 1 0 0 1-.415-1.074l.4-1.599V7.5zm2 0h-2v.938a1 1 0 0 1-.03.243l-.4 1.598.93.62.93-.62-.4-1.598a1 1 0 0 1-.03-.243V7.5z"/>
                                            <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm5.5-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H9v1H8v1h1v1H8v1h1v1H8v1h1v1H8v1h1v1H8v1H7.5v-1H7v-1h.5v-1H7v-1h.5v-1H7v-1h.5v-1H7v-1h.5v-1H7v-1h.5V1z"/>
                                        </svg>
                                    </span>
                                    <input id="zip_code" type="text" name="zip_code" value="{{ $shop->zip_code ?? old('zip_code') }}" required readonly class="form-control border-start-0 ps-0 bg-light">
                                </div>
                                @error('zip_code') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Hours & Branding Section -->
                    <div class="mb-5">
                        <div class="d-flex align-items-center mb-3">
                            <div class="bg-warning rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16">
                                    <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                                </svg>
                            </div>
                            <h4 class="mb-0 fw-bold text-dark">Hours & Branding</h4>
                        </div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="opening_time" class="form-label fw-bold small text-muted">Opening Time</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white border-end-0">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#E2712F" viewBox="0 0 16 16">
                                            <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                            <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                                        </svg>
                                    </span>
                                    <input id="opening_time" type="time" name="opening_time" value="{{ $shop->opening_time ?? old('opening_time') }}" required class="form-control border-start-0 ps-0">
                                </div>
                                @error('opening_time') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="closing_time" class="form-label fw-bold small text-muted">Closing Time</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white border-end-0">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#E2712F" viewBox="0 0 16 16">
                                            <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                            <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                                        </svg>
                                    </span>
                                    <input id="closing_time" type="time" name="closing_time" value="{{ $shop->closing_time ?? old('closing_time') }}" required class="form-control border-start-0 ps-0">
                                </div>
                                @error('closing_time') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-12">
                                <label for="logo" class="form-label fw-bold small text-muted">
                                    @if ($isEditMode && $shop->logo_path)
                                        Change Logo (PNG/JPG, Max 2MB)
                                    @else
                                        Shop Logo (PNG/JPG, Max 2MB)
                                    @endif
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white border-end-0">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#E2712F" viewBox="0 0 16 16">
                                            <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                                            <path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z"/>
                                        </svg>
                                    </span>
                                    <input id="logo" type="file" name="logo" class="form-control border-start-0 ps-0">
                                </div>
                                @if ($isEditMode && $shop->logo_path)
                                    <div class="mt-2">
                                        <p class="small text-muted mb-1">Current Logo:</p>
                                        <img src="{{ asset('storage/' . $shop->logo_path) }}" alt="{{ $shop->name }} Logo" class="rounded" style="height: 60px; width: auto;">
                                    </div>
                                @endif
                                @error('logo') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div class="d-grid">
                        <button type="submit" class="btn btn-success w-100 py-3 fw-bold d-flex align-items-center justify-content-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2" viewBox="0 0 16 16">
                                <path d="M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm12-1a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"/>
                                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                            </svg>
                            {{ $buttonText }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- GOOGLE MAPS JAVASCRIPT -->
    <script>
        function initializeAutocomplete() {
            const options = {
                types: ['address'],
                componentRestrictions: { 'country': ['us', 'ca'] } 
            };
            
            const input = document.getElementById('address_line_1');
            const autocomplete = new google.maps.places.Autocomplete(input, options);

            autocomplete.addListener('place_changed', function () {
                const place = autocomplete.getPlace();
                
                document.getElementById('city').value = '';
                document.getElementById('state').value = '';
                document.getElementById('zip_code').value = '';

                if (!place.address_components) {
                    return;
                }

                for (let i = 0; i < place.address_components.length; i++) {
                    const component = place.address_components[i];
                    const type = component.types[0];

                    switch (type) {
                        case 'locality':
                            document.getElementById('city').value = component.long_name;
                            break;
                        case 'administrative_area_level_1':
                            document.getElementById('state').value = component.short_name;
                            break;
                        case 'postal_code':
                            document.getElementById('zip_code').value = component.long_name;
                            break;
                    }
                }
            });
        }
    </script>
    
    <script async defer 
        src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places&callback=initializeAutocomplete">
    </script>
</x-app-layout>