@extends('admin.layouts.app')

@section('title', 'Yeni Acente')
@section('page_title', 'Yeni Acente Ekle')

@push('styles')
    <link rel="stylesheet" href="{{asset('assets/admin/css/forms.css')}}">
@endpush

@section('content')
    <div class="form-container">
        <!-- Form Header -->
        <div class="form-header">
            <div class="form-header-content">
                <div class="form-title-section">
                    <div class="form-breadcrumb">
                        <a href="{{ route('admin.agencies.index') }}" class="breadcrumb-link">
                            <i class="fas fa-building"></i>
                            Acenteler
                        </a>
                        <i class="fas fa-chevron-right breadcrumb-separator"></i>
                        <span class="breadcrumb-current">Yeni Acente</span>
                    </div>
                    <h1 class="form-title">Yeni Acente Ekle</h1>
                    <p class="form-subtitle">Sisteme yeni bir acente kaydı oluşturun ve tüm bilgileri doldurun.</p>
                </div>
                <div class="form-actions">
                    <a href="{{ route('admin.agencies.index') }}" class="btn btn-ghost">
                        <i class="fas fa-times me-2"></i>
                        İptal
                    </a>
                </div>
            </div>
        </div>

        <!-- Form Content -->
        <form action="{{ route('admin.agencies.store') }}" method="POST" enctype="multipart/form-data"
              class="agency-form">
            @csrf

            <div class="form-grid">
                <!-- Basic Information Card -->
                <div class="form-card">
                    <div class="form-card-header">
                        <div class="card-icon bg-primary">
                            <i class="fas fa-info-circle"></i>
                        </div>
                        <div class="card-title-section">
                            <h3 class="card-title">Temel Bilgiler</h3>
                            <p class="card-description">Acente'nin temel tanımlayıcı bilgileri</p>
                        </div>
                    </div>
                    <div class="form-card-body">
                        <div class="form-row">
                            <div class="form-group col-md-8">
                                <label for="name" class="form-label required">Acente Adı</label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror"
                                       id="name" name="name" value="{{ old('name') }}"
                                       placeholder="Acente adını giriniz">
                                @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-4">
                                <label for="code" class="form-label">Acente Kodu</label>
                                <input type="text" class="form-control @error('code') is-invalid @enderror"
                                       id="code" name="code" value="{{ old('code') }}"
                                       placeholder="Otomatik oluşturulacak" readonly>
                                <small class="form-text">Boş bırakırsanız otomatik oluşturulur</small>
                                @error('code')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label for="description" class="form-label">Açıklama</label>
                                <textarea class="form-control @error('description') is-invalid @enderror"
                                          id="description" name="description" rows="3"
                                          placeholder="Acente hakkında kısa açıklama">{{ old('description') }}</textarea>
                                @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="business_type" class="form-label">İş Türü</label>
                                <select class="form-control @error('business_type') is-invalid @enderror"
                                        id="business_type" name="business_type">
                                    <option value="">Seçiniz</option>
                                    <option value="domestic" {{ old('business_type') == 'domestic' ? 'selected' : '' }}>
                                        Yurtiçi
                                    </option>
                                    <option
                                        value="international" {{ old('business_type') == 'international' ? 'selected' : '' }}>
                                        Yurtdışı
                                    </option>
                                    <option value="both" {{ old('business_type') == 'both' ? 'selected' : '' }}>Karma
                                    </option>
                                </select>
                                @error('business_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="commission_rate" class="form-label">Komisyon Oranı (%)</label>
                                <input type="number" class="form-control @error('commission_rate') is-invalid @enderror"
                                       id="commission_rate" name="commission_rate"
                                       value="{{ old('commission_rate', '10.00') }}"
                                       step="0.01" min="0" max="100" placeholder="10.00">
                                @error('commission_rate')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Logo Upload Card -->
                <div class="form-card">
                    <div class="form-card-header">
                        <div class="card-icon bg-info">
                            <i class="fas fa-image"></i>
                        </div>
                        <div class="card-title-section">
                            <h3 class="card-title">Logo</h3>
                            <p class="card-description">Acente logosu yükleyin</p>
                        </div>
                    </div>
                    <div class="form-card-body">
                        <div class="upload-area" id="logoUploadArea">
                            <div class="upload-content">
                                <div class="upload-icon">
                                    <i class="fas fa-cloud-upload-alt"></i>
                                </div>
                                <div class="upload-text">
                                    <span class="upload-title">Logo yüklemek için tıklayın</span>
                                    <span class="upload-subtitle">veya dosyayı buraya sürükleyin</span>
                                </div>
                                <input type="file" class="upload-input @error('logo') is-invalid @enderror"
                                       id="logo" name="logo" accept="image/*">
                            </div>
                            <div class="upload-preview" id="logoPreview" style="display: none;">
                                <img src="" alt="Logo Preview" class="preview-image">
                                <button type="button" class="remove-upload" onclick="removeUpload('logo')">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                        @error('logo')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                        <small class="form-text">JPG, PNG veya GIF formatında, maksimum 2MB</small>
                    </div>
                </div>

                <!-- Contact Information Card -->
                <div class="form-card">
                    <div class="form-card-header">
                        <div class="card-icon bg-success">
                            <i class="fas fa-address-book"></i>
                        </div>
                        <div class="card-title-section">
                            <h3 class="card-title">İletişim Bilgileri</h3>
                            <p class="card-description">Acente iletişim detayları</p>
                        </div>
                    </div>
                    <div class="form-card-body">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="contact_person" class="form-label">İletişim Kişisi</label>
                                <input type="text" class="form-control @error('contact_person') is-invalid @enderror"
                                       id="contact_person" name="contact_person" value="{{ old('contact_person') }}"
                                       placeholder="Ad Soyad">
                                @error('contact_person')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="contact_phone" class="form-label">Telefon</label>
                                <input type="tel" class="form-control @error('contact_phone') is-invalid @enderror"
                                       id="contact_phone" name="contact_phone" value="{{ old('contact_phone') }}"
                                       placeholder="+90 555 123 45 67">
                                @error('contact_phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="contact_email" class="form-label">E-posta</label>
                                <input type="email" class="form-control @error('contact_email') is-invalid @enderror"
                                       id="contact_email" name="contact_email" value="{{ old('contact_email') }}"
                                       placeholder="info@acente.com">
                                @error('contact_email')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="website_url" class="form-label">Web Sitesi</label>
                                <input type="url" class="form-control @error('website_url') is-invalid @enderror"
                                       id="website_url" name="website_url" value="{{ old('website_url') }}"
                                       placeholder="https://www.acente.com">
                                @error('website_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label for="contact_address" class="form-label">Adres</label>
                                <textarea class="form-control @error('contact_address') is-invalid @enderror"
                                          id="contact_address" name="contact_address" rows="3"
                                          placeholder="Tam adres bilgisi">{{ old('contact_address') }}</textarea>
                                @error('contact_address')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Legal Information Card -->
                <div class="form-card">
                    <div class="form-card-header">
                        <div class="card-icon bg-warning">
                            <i class="fas fa-file-contract"></i>
                        </div>
                        <div class="card-title-section">
                            <h3 class="card-title">Yasal Bilgiler</h3>
                            <p class="card-description">Vergi ve TÜRSAB belgeleri</p>
                        </div>
                    </div>
                    <div class="form-card-body">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="tax_number" class="form-label">Vergi Numarası</label>
                                <input type="text" class="form-control @error('tax_number') is-invalid @enderror"
                                       id="tax_number" name="tax_number" value="{{ old('tax_number') }}"
                                       placeholder="1234567890">
                                @error('tax_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="documents-grid">
                            <div class="document-upload">
                                <label class="form-label">Vergi Levhası</label>
                                <div class="upload-area small" id="taxCertificateUploadArea">
                                    <div class="upload-content">
                                        <i class="fas fa-file-pdf upload-icon-small"></i>
                                        <span class="upload-text-small">PDF dosyası seçin</span>
                                        <input type="file"
                                               class="upload-input @error('tax_certificate_file') is-invalid @enderror"
                                               id="tax_certificate_file" name="tax_certificate_file" accept=".pdf">
                                    </div>
                                </div>
                                @error('tax_certificate_file')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="document-upload">
                                <label class="form-label">TÜRSAB Belgesi</label>
                                <div class="upload-area small" id="tursabCertificateUploadArea">
                                    <div class="upload-content">
                                        <i class="fas fa-file-pdf upload-icon-small"></i>
                                        <span class="upload-text-small">PDF dosyası seçin</span>
                                        <input type="file"
                                               class="upload-input @error('tursab_certificate_file') is-invalid @enderror"
                                               id="tursab_certificate_file" name="tursab_certificate_file"
                                               accept=".pdf">
                                    </div>
                                </div>
                                @error('tursab_certificate_file')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="document-upload">
                                <label class="form-label">TÜRSAB Faaliyet Belgesi</label>
                                <div class="upload-area small" id="tursabActivityUploadArea">
                                    <div class="upload-content">
                                        <i class="fas fa-file-pdf upload-icon-small"></i>
                                        <span class="upload-text-small">PDF dosyası seçin</span>
                                        <input type="file"
                                               class="upload-input @error('tursab_activity_certificate_file') is-invalid @enderror"
                                               id="tursab_activity_certificate_file"
                                               name="tursab_activity_certificate_file" accept=".pdf">
                                    </div>
                                </div>
                                @error('tursab_activity_certificate_file')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="document-upload">
                                <label class="form-label">TÜRSAB Sicil Belgesi</label>
                                <div class="upload-area small" id="tursabRegistryUploadArea">
                                    <div class="upload-content">
                                        <i class="fas fa-file-pdf upload-icon-small"></i>
                                        <span class="upload-text-small">PDF dosyası seçin</span>
                                        <input type="file"
                                               class="upload-input @error('tursab_registry_certificate_file') is-invalid @enderror"
                                               id="tursab_registry_certificate_file"
                                               name="tursab_registry_certificate_file" accept=".pdf">
                                    </div>
                                </div>
                                @error('tursab_registry_certificate_file')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Social Media Card -->
                <div class="form-card">
                    <div class="form-card-header">
                        <div class="card-icon bg-info">
                            <i class="fab fa-facebook"></i>
                        </div>
                        <div class="card-title-section">
                            <h3 class="card-title">Sosyal Medya</h3>
                            <p class="card-description">Sosyal medya hesapları</p>
                        </div>
                    </div>
                    <div class="form-card-body">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="facebook_url" class="form-label">
                                    <i class="fab fa-facebook text-primary me-2"></i>
                                    Facebook
                                </label>
                                <input type="url" class="form-control @error('facebook_url') is-invalid @enderror"
                                       id="facebook_url" name="facebook_url" value="{{ old('facebook_url') }}"
                                       placeholder="https://facebook.com/acente">
                                @error('facebook_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="instagram_url" class="form-label">
                                    <i class="fab fa-instagram text-danger me-2"></i>
                                    Instagram
                                </label>
                                <input type="url" class="form-control @error('instagram_url') is-invalid @enderror"
                                       id="instagram_url" name="instagram_url" value="{{ old('instagram_url') }}"
                                       placeholder="https://instagram.com/acente">
                                @error('instagram_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="twitter_url" class="form-label">
                                    <i class="fab fa-twitter text-info me-2"></i>
                                    Twitter/X
                                </label>
                                <input type="url" class="form-control @error('twitter_url') is-invalid @enderror"
                                       id="twitter_url" name="twitter_url" value="{{ old('twitter_url') }}"
                                       placeholder="https://twitter.com/acente">
                                @error('twitter_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="youtube_url" class="form-label">
                                    <i class="fab fa-youtube text-danger me-2"></i>
                                    YouTube
                                </label>
                                <input type="url" class="form-control @error('youtube_url') is-invalid @enderror"
                                       id="youtube_url" name="youtube_url" value="{{ old('youtube_url') }}"
                                       placeholder="https://youtube.com/acente">
                                @error('youtube_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Status Settings Card -->
                <div class="form-card">
                    <div class="form-card-header">
                        <div class="card-icon bg-success">
                            <i class="fas fa-toggle-on"></i>
                        </div>
                        <div class="card-title-section">
                            <h3 class="card-title">Durum Ayarları</h3>
                            <p class="card-description">Acente'nin durumu ve onay bilgileri</p>
                        </div>
                    </div>
                    <div class="form-card-body">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <div class="form-check-card">
                                    <input type="checkbox" class="form-check-input" id="is_active" name="is_active"
                                           value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">
                                        <div class="check-content">
                                            <div class="check-title">Aktif</div>
                                            <div class="check-description">Acente aktif durumda olsun</div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <div class="form-check-card">
                                    <input type="checkbox" class="form-check-input" id="is_approved" name="is_approved"
                                           value="1" {{ old('is_approved') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_approved">
                                        <div class="check-content">
                                            <div class="check-title">Onaylanmış</div>
                                            <div class="check-description">Acente onaylanmış olarak işaretlensin</div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Footer -->
            <div class="form-footer">
                <div class="form-footer-content">
                    <div class="footer-info">
                        <i class="fas fa-info-circle text-primary me-2"></i>
                        <span>Tüm zorunlu alanları doldurduğunuzdan emin olun</span>
                    </div>
                    <div class="footer-actions">
                        <a href="{{ route('admin.agencies.index') }}" class="btn btn-outline">
                            <i class="fas fa-times me-2"></i>
                            İptal
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>
                            Acente'yi Kaydet
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        // Form validation and interactions
        document.addEventListener('DOMContentLoaded', function () {
            // Auto-generate code from name
            const nameInput = document.getElementById('name');
            const codeInput = document.getElementById('code');

            nameInput.addEventListener('input', function () {
                if (!codeInput.hasAttribute('data-manual')) {
                    let code = this.value.toUpperCase()
                        .replace(/[^A-Z0-9]/g, '')
                        .substring(0, 3);

                    if (code.length < 3) {
                        code = code.padEnd(3, 'X');
                    }

                    code += Math.floor(Math.random() * 900 + 100);
                    codeInput.value = code;
                }
            });

            codeInput.addEventListener('input', function () {
                this.setAttribute('data-manual', 'true');
            });

            // File upload handlers
            setupFileUpload('logo', true);
            setupFileUpload('tax_certificate_file', false);
            setupFileUpload('tursab_certificate_file', false);
            setupFileUpload('tursab_activity_certificate_file', false);
            setupFileUpload('tursab_registry_certificate_file', false);

            // Phone number formatting
            const phoneInput = document.getElementById('contact_phone');
            phoneInput.addEventListener('input', function () {
                let value = this.value.replace(/\D/g, '');
                if (value.startsWith('90')) {
                    value = value.substring(2);
                }
                if (value.length > 0) {
                    value = '+90 ' + value.replace(/(\d{3})(\d{3})(\d{2})(\d{2})/, '$1 $2 $3 $4');
                }
                this.value = value;
            });
        });

        function setupFileUpload(inputId, isImage = false) {
            const input = document.getElementById(inputId);
            const uploadArea = input.closest('.upload-area');
            const preview = uploadArea.querySelector('.upload-preview') ||
                document.getElementById(inputId.replace('_file', '') + 'Preview');

            input.addEventListener('change', function () {
                const file = this.files[0];
                if (file) {
                    if (isImage && preview) {
                        const reader = new FileReader();
                        reader.onload = function (e) {
                            preview.querySelector('img').src = e.target.result;
                            preview.style.display = 'block';
                            uploadArea.querySelector('.upload-content').style.display = 'none';
                        };
                        reader.readAsDataURL(file);
                    } else {
                        uploadArea.classList.add('has-file');
                        const uploadText = uploadArea.querySelector('.upload-text-small');
                        if (uploadText) {
                            uploadText.textContent = file.name;
                        }
                    }
                }
            });

            // Drag and drop
            uploadArea.addEventListener('dragover', function (e) {
                e.preventDefault();
                this.classList.add('drag-over');
            });

            uploadArea.addEventListener('dragleave', function () {
                this.classList.remove('drag-over');
            });

            uploadArea.addEventListener('drop', function (e) {
                e.preventDefault();
                this.classList.remove('drag-over');

                const files = e.dataTransfer.files;
                if (files.length > 0) {
                    input.files = files;
                    input.dispatchEvent(new Event('change'));
                }
            });

            uploadArea.addEventListener('click', function () {
                input.click();
            });
        }

        function removeUpload(inputId) {
            const input = document.getElementById(inputId);
            const uploadArea = input.closest('.upload-area');
            const preview = document.getElementById(inputId.replace('_file', '') + 'Preview');

            input.value = '';
            if (preview) {
                preview.style.display = 'none';
                uploadArea.querySelector('.upload-content').style.display = 'flex';
            } else {
                uploadArea.classList.remove('has-file');
                const uploadText = uploadArea.querySelector('.upload-text-small');
                if (uploadText) {
                    uploadText.textContent = 'PDF dosyası seçin';
                }
            }
        }
    </script>
@endpush