@extends('admin.layout.main')

@section('admin')
<div class="flex flex-col h-full overflow-auto">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Create New Branch</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Add a new branch to your system</p>
        </div>
        <a href="{{ route('admin.branches.index') }}"
            class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors flex items-center">
            <i class="fas fa-arrow-left mr-2"></i>
            Back to Branches
        </a>
    </div>

    <!-- Create Form -->
    <div class="bg-white dark:bg-dark-secondary rounded shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
        <form action="{{ route('admin.branches.store') }}" method="POST">
            @csrf
            
            <div class="p-6 space-y-6">
                <!-- Basic Information -->
                <div>
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center">
                        <i class="fas fa-info-circle mr-2 text-[#10B981]"></i>
                        Basic Information
                    </h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Branch Name -->
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Branch Name *
                            </label>
                            <input type="text" name="name" id="name" required
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#10B981] focus:border-transparent transition-colors"
                                placeholder="Enter branch name">
                            @error('name')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Branch Type -->
                        <div>
                            <label for="branch_type_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Branch Type *
                            </label>
                            <select name="branch_type_name" id="branch_type_name" required
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#10B981] focus:border-transparent transition-colors">
                                <option value="">Select Branch Type</option>
                                <option value="Head Office">Head Office</option>
                                <option value="Regional Office">Regional Office</option>
                                <option value="Branch Office">Branch Office</option>
                                <option value="Service Center">Service Center</option>
                                <option value="Outlet">Outlet</option>
                                <option value="Warehouse">Warehouse</option>
                            </select>
                            @error('branch_type_name')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Manager/User -->
                        <div>
                            <label for="user_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Branch Manager *
                            </label>
                            <select name="user_id" id="user_id" required
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#10B981] focus:border-transparent transition-colors">
                                <option value="">Select Manager</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}">
                                        {{ $user->name }} ({{ ucfirst($user->role) }})
                                    </option>
                                @endforeach
                            </select>
                            @error('user_id')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Address Information -->
                <div>
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center">
                        <i class="fas fa-map-marker-alt mr-2 text-[#10B981]"></i>
                        Address Information
                    </h3>
                    
                    <div class="space-y-4">
                        <!-- Address Line 1 -->
                        <div>
                            <label for="addressline1" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Address Line 1 *
                            </label>
                            <input type="text" name="addressline1" id="addressline1" required
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#10B981] focus:border-transparent transition-colors"
                                placeholder="Street address, P.O. box, company name">
                            @error('addressline1')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Address Line 2 -->
                        <div>
                            <label for="addressline2" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Address Line 2 (Optional)
                            </label>
                            <input type="text" name="addressline2" id="addressline2"
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#10B981] focus:border-transparent transition-colors"
                                placeholder="Apartment, suite, unit, building, floor, etc.">
                            @error('addressline2')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Contact Information -->
                <div>
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center">
                        <i class="fas fa-phone-alt mr-2 text-[#10B981]"></i>
                        Contact Information
                    </h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Phone -->
                        <div>
                            <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Phone Number *
                            </label>
                            <input type="text" name="phone" id="phone" required
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#10B981] focus:border-transparent transition-colors"
                                placeholder="Enter phone number">
                            @error('phone')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Email -->
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Email Address *
                            </label>
                            <input type="email" name="email" id="email" required
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#10B981] focus:border-transparent transition-colors"
                                placeholder="Enter email address">
                            @error('email')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Operating Hours -->
                <div>
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center">
                        <i class="fas fa-clock mr-2 text-[#10B981]"></i>
                        Operating Hours
                    </h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Opening Days -->
                        <div>
                            <label for="opening_day" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Opening Days *
                            </label>
                            <input type="text" name="opening_day" id="opening_day" required
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#10B981] focus:border-transparent transition-colors"
                                placeholder="e.g., Sunday - Thursday"
                                value="Sunday - Thursday">
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Enter the days when the branch is open</p>
                            @error('opening_day')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Opening Hours -->
                        <div>
                            <label for="opening_hour" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Opening Hours *
                            </label>
                            <input type="text" name="opening_hour" id="opening_hour" required
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#10B981] focus:border-transparent transition-colors"
                                placeholder="e.g., 8:00 AM - 6:00 PM"
                                value="8:00 AM - 6:00 PM">
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Enter the opening hours format</p>
                            @error('opening_hour')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Map Information -->
                <div>
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center">
                        <i class="fas fa-map mr-2 text-[#10B981]"></i>
                        Map Location
                    </h3>
                    
                    <div>
                        <label for="maps_link" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Google Maps Link *
                        </label>
                        <input type="url" name="maps_link" id="maps_link" required
                            class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-[#10B981] focus:border-transparent transition-colors"
                            placeholder="https://maps.google.com/...">
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                            Paste the Google Maps URL for this branch location
                        </p>
                        @error('maps_link')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="px-6 py-4 bg-gray-50 dark:bg-gray-800 border-t border-gray-100 dark:border-gray-700 flex justify-end space-x-3">
                <a href="{{ route('admin.branches.index') }}"
                    class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                    Cancel
                </a>
                <button type="submit"
                    class="px-4 py-2 bg-[#10B981] text-white rounded hover:bg-[#0da271] transition-colors flex items-center">
                    <i class="fas fa-save mr-2"></i>
                    Create Branch
                </button>
            </div>
        </form>
    </div>
</div>
@endsection