@extends('layout.app')

@section('title', 'Profil Perusahaan')

@php
use Illuminate\Support\Facades\Storage;
@endphp

@section('content')
<x-material-page-header 
    title="Profil Perusahaan" 
    subtitle="Nama dan logo perusahaan akan digunakan di aplikasi mobile dan sistem"
    :breadcrumbs="[
        ['name' => 'Pengaturan', 'url' => route('pengaturan.dashboard')],
        ['name' => 'Profil Perusahaan']
    ]"
/>

<div class="container-fluid py-4">
    @if(session('success'))
        <div class="alert alert-success text-white alert-dismissible fade show" role="alert">
            <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">check_circle</i></span>
            <span class="alert-text"><strong>Success!</strong> {{ session('success') }}</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="card my-4">
        <div class="card-header pb-0 pt-3">
            <h6 class="mb-0">
                <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">business</i>Profil Perusahaan
            </h6>
        </div>
        <div class="card-body pt-0">
        <form action="{{ route('pengaturan.perusahaan.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            
            <div class="row">
                <div class="col-md-6">
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Nama Perusahaan <span class="text-danger">*</span></label>
                        <input type="text" name="company_name" class="form-control" value="{{ $profile->company_name ?? '' }}" required>
                        <small class="form-text text-muted">Nama perusahaan resmi</small>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Nama Aplikasi / ISP</label>
                        <input type="text" name="app_name" class="form-control" value="{{ $profile->app_name ?? 'BUKEFIBER' }}" placeholder="BUKEFIBER">
                        <small class="form-text text-muted">Nama yang ditampilkan di aplikasi (default: BUKEFIBER)</small>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Logo Perusahaan</label>
                        <input type="file" name="logo" class="form-control" accept="image/*" id="logoInput">
                        <small class="form-text text-muted">Format: JPG, PNG, GIF, SVG (Max: 2MB). Logo bulat direkomendasikan.</small>
                    @if($profile && $profile->logo_path)
                        <div class="mt-2">
                            <p class="text-muted small mb-1">Logo saat ini:</p>
                            <img src="{{ Storage::url($profile->logo_path) }}" alt="Current Logo" class="img-thumbnail" id="currentLogo" style="max-width: 200px; max-height: 120px; display: block;">
                            <small class="text-muted">
                                <a href="{{ Storage::url($profile->logo_path) }}" target="_blank">Lihat ukuran penuh</a> | 
                                URL API: <code style="font-size: 10px;">{{ url('storage/'.$profile->logo_path) }}</code>
                            </small>
                        </div>
                    @else
                        <div class="mt-2">
                            <p class="text-warning small">Belum ada logo. Logo akan ditampilkan di aplikasi mobile.</p>
                        </div>
                    @endif
                    <div id="logoPreview" class="mt-2" style="display: none;">
                        <p class="text-muted small mb-1">Preview logo baru:</p>
                        <img id="logoPreviewImg" src="" alt="Logo Preview" class="img-thumbnail" style="max-width: 200px; max-height: 120px;">
                    </div>
                </div>
            </div>
            
            <div class="input-group input-group-outline mb-3">
                <label class="form-label">Alamat</label>
                <textarea name="address" class="form-control" rows="3">{{ $profile->address ?? '' }}</textarea>
            </div>
            
            <div class="row">
                <div class="col-md-4">
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Telepon</label>
                        <input type="text" name="phone" class="form-control" value="{{ $profile->phone ?? '' }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control" value="{{ $profile->email ?? '' }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Website</label>
                        <input type="url" name="website" class="form-control" value="{{ $profile->website ?? '' }}">
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">NPWP</label>
                        <input type="text" name="tax_number" class="form-control" value="{{ $profile->tax_number ?? '' }}">
                    </div>
                </div>
            </div>
            
            <div class="input-group input-group-outline mb-3">
                <label class="form-label">Deskripsi</label>
                <textarea name="description" class="form-control" rows="4">{{ $profile->description ?? '' }}</textarea>
            </div>
            
            <hr class="my-4">
            
            <!-- Branding Section -->
            <div class="card bg-gradient-info my-4">
                <div class="card-header pb-0 pt-3 bg-transparent">
                    <h6 class="mb-0 text-white">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">palette</i>
                        Pengaturan Branding & Tema
                    </h6>
                </div>
                <div class="card-body pt-0">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-white font-weight-bold">Warna Utama (Primary)</label>
                            <div class="input-group">
                                <input type="color" 
                                       name="primary_color" 
                                       class="form-control form-control-color" 
                                       value="{{ $profile->primary_color ?? '#28a745' }}" 
                                       id="primaryColor"
                                       title="Pilih warna utama">
                                <input type="text" 
                                       class="form-control" 
                                       value="{{ $profile->primary_color ?? '#28a745' }}" 
                                       id="primaryColorText"
                                       readonly>
                            </div>
                                <small class="text-white-50 d-block mt-2">
                                    <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">info</i>
                                    Warna utama untuk tombol, header, dan elemen penting (default: Hijau telur asin #28a745)
                                </small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-white font-weight-bold">Warna Sekunder (Secondary)</label>
                            <div class="input-group">
                                <input type="color" 
                                       name="secondary_color" 
                                       class="form-control form-control-color" 
                                       value="{{ $profile->secondary_color ?? '#ffffff' }}" 
                                       id="secondaryColor"
                                       title="Pilih warna sekunder">
                                <input type="text" 
                                       class="form-control" 
                                       value="{{ $profile->secondary_color ?? '#ffffff' }}" 
                                       id="secondaryColorText"
                                       readonly>
                            </div>
                                <small class="text-white-50 d-block mt-2">
                                    <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">info</i>
                                    Warna sekunder untuk background dan elemen pendukung (default: Putih #ffffff)
                                </small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-warning text-white mt-3 mb-0">
                        <strong><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">warning</i>Catatan:</strong>
                        <ul class="mb-0 mt-2">
                            <li>Warna tema akan diterapkan di seluruh aplikasi web</li>
                            <li>Pastikan kontras warna cukup untuk keterbacaan</li>
                            <li>Perubahan warna akan terlihat setelah refresh halaman</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <hr class="my-4">
            
            <!-- Template Section -->
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">description</i>
                        Template Custom
                    </h6>
                </div>
                <div class="card-body pt-0">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Template Invoice</label>
                            <textarea name="invoice_template" 
                                      class="form-control" 
                                      rows="8" 
                                      placeholder="Gunakan variabel: {{company_name}}, {{invoice_number}}, {{customer_name}}, {{amount}}, {{date}}, dll">{{ $profile->invoice_template ?? '' }}</textarea>
                            <small class="form-text text-muted">
                                Template custom untuk invoice. Kosongkan untuk menggunakan template default.
                            </small>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Template WhatsApp</label>
                            <textarea name="whatsapp_template" 
                                      class="form-control" 
                                      rows="8" 
                                      placeholder="Gunakan variabel: {{company_name}}, {{invoice_number}}, {{customer_name}}, {{amount}}, {{date}}, dll">{{ $profile->whatsapp_template ?? '' }}</textarea>
                            <small class="form-text text-muted">
                                Template custom untuk pesan WhatsApp. Kosongkan untuk menggunakan template default.
                            </small>
                        </div>
                    </div>
                    
                    <div class="alert alert-info text-white mt-3 mb-0">
                        <strong><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">info</i>Variabel yang Tersedia:</strong>
                        <ul class="mb-0 mt-2">
                            <li><code>{{company_name}}</code> - Nama perusahaan</li>
                            <li><code>{{invoice_number}}</code> - Nomor invoice</li>
                            <li><code>{{customer_name}}</code> - Nama pelanggan</li>
                            <li><code>{{amount}}</code> - Jumlah tagihan</li>
                            <li><code>{{date}}</code> - Tanggal tagihan</li>
                            <li><code>{{due_date}}</code> - Tanggal jatuh tempo</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="text-end">
                <button class="btn bg-gradient-primary mb-0" type="submit">
                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">save</i> Simpan Semua Pengaturan
                </button>
            </div>
        </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const logoInput = document.getElementById('logoInput');
    const logoPreview = document.getElementById('logoPreview');
    const logoPreviewImg = document.getElementById('logoPreviewImg');
    const currentLogo = document.getElementById('currentLogo');
    
    if (logoInput) {
        logoInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                // Validate file size (2MB)
                if (file.size > 2 * 1024 * 1024) {
                    alert('Ukuran file terlalu besar. Maksimal 2MB.');
                    this.value = '';
                    return;
                }
                
                // Validate file type
                const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/svg+xml'];
                if (!validTypes.includes(file.type)) {
                    alert('Format file tidak valid. Gunakan JPG, PNG, GIF, atau SVG.');
                    this.value = '';
                    return;
                }
                
                const reader = new FileReader();
                reader.onload = function(e) {
                    logoPreviewImg.src = e.target.result;
                    logoPreview.style.display = 'block';
                    
                    // Hide current logo if exists
                    if (currentLogo) {
                        currentLogo.style.display = 'none';
                    }
                };
                reader.readAsDataURL(file);
            } else {
                logoPreview.style.display = 'none';
                if (currentLogo) {
                    currentLogo.style.display = 'block';
                }
            }
        });
    }
});
</script>
@endpush
@endsection