@extends('adminlte::page')

@section('title', 'Configuración de Empresa')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="mb-0"><i class="fas fa-building text-primary mr-2"></i> Perfil de Empresa</h1>
            <small class="text-muted">Administra la información fiscal y de contacto de tu empresa</small>
        </div>
        <x-ui.breadcrumbs :paths="['Empresa' => '']" homeRoute="dashboard" />
    </div>
@stop

@section('content')
    <div x-data="companySettings()" x-init="init()">
        <x-ui.card color="primary" shadow="shadow-lg">
            <x-slot:header>
                <div class="p-0 border-bottom-0">
                    <ul class="nav nav-tabs" id="company-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="company-tab" data-toggle="tab" href="#company" role="tab" aria-controls="company" aria-selected="true">
                                <i class="fas fa-building mr-1"></i> Empresa
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="license-tab" data-toggle="tab" href="#license" role="tab" aria-controls="license" aria-selected="false">
                                <i class="fas fa-key mr-1"></i> Licencia
                            </a>
                        </li>
                    </ul>
                </div>
            </x-slot:header>
            
            <div class="tab-content">
                {{-- Tab Empresa --}}
                <div class="tab-pane active" id="company" role="tabpanel">
                    <template x-if="loading.data">
                        <div class="py-4">
                            <div class="row">
                                <div class="col-md-4"><x-ui.skeleton-loader type="text" class="mb-3" /></div>
                                <div class="col-md-8"><x-ui.skeleton-loader type="text" class="mb-3" /></div>
                            </div>
                            <div class="row">
                                <div class="col-md-6"><x-ui.skeleton-loader type="text" class="mb-3" /></div>
                                <div class="col-md-6"><x-ui.skeleton-loader type="text" class="mb-3" /></div>
                            </div>
                            <x-ui.skeleton-loader type="text" class="mb-3" />
                        </div>
                    </template>

                    <form @submit.prevent="saveCompanyData" x-show="!loading.data" style="display: none;">
                        {{-- Sección: Identificación Fiscal --}}
                        <h5 class="section-header">
                            <i class="fas fa-id-card text-primary mr-2"></i> Identificación Fiscal
                        </h5>

                        <div class="row">
                            <div class="col-sm-4">
                                <x-form.input name="rif" label="RIF / Tax ID" x-model="form.rif" required
                                              placeholder="Ej: J-12345678-9" icon="fas fa-id-card"
                                              tooltip="Registro de Identidad Fiscal de la Empresa" />
                                <template x-if="errors.rif">
                                    <span class="text-danger small font-weight-bold" x-text="errors.rif[0]"></span>
                                </template>
                            </div>
                            <div class="col-sm-8">
                                <x-form.input name="business_name" label="Razón Social" x-model="form.business_name" required
                                              icon="fas fa-building"
                                              tooltip="Nombre Legal de la Empresa" />
                                <template x-if="errors.business_name">
                                    <span class="text-danger small font-weight-bold" x-text="errors.business_name[0]"></span>
                                </template>
                            </div>
                        </div>

                        {{-- Sección: Contacto --}}
                        <h5 class="section-header mt-4">
                            <i class="fas fa-address-book text-primary mr-2"></i> Contacto
                        </h5>

                        <div class="row">
                            <div class="col-sm-6">
                                <x-form.input name="email" label="Correo Electrónico" type="email" icon="fas fa-envelope" x-model="form.email"
                                              tooltip="Correo oficial de contacto" />
                                <template x-if="errors.email">
                                    <span class="text-danger small font-weight-bold" x-text="errors.email[0]"></span>
                                </template>
                            </div>
                            <div class="col-sm-6">
                                <x-form.input name="phone_primary" label="Teléfono" icon="fas fa-phone" x-model="form.phone_primary"
                                              tooltip="Número de teléfono principal" />
                                <template x-if="errors.phone_primary">
                                    <span class="text-danger small font-weight-bold" x-text="errors.phone_primary[0]"></span>
                                </template>
                            </div>
                        </div>

                        <x-form.textarea name="address" label="Dirección Fiscal" rows="3" x-model="form.address"
                                         tooltip="Dirección legal de la empresa para facturación" />
                        <template x-if="errors.address">
                            <span class="text-danger small font-weight-bold" x-text="errors.address[0]"></span>
                        </template>

                        {{-- Acción --}}
                        <hr class="my-4">
                        <div class="text-right">
                            <x-form.btn-save x-bind:disabled="saving" class="btn-lg px-4 shadow-sm" submitText="Guardar Cambios">
                                <span x-show="!saving"><i class="fas fa-save mr-1"></i> Guardar Cambios</span>
                                <span x-show="saving"><i class="fas fa-spinner fa-spin mr-1"></i> Guardando...</span>
                            </x-form.btn-save>
                        </div>
                    </form>
                </div>

                {{-- Tab Licencia --}}
                <div class="tab-pane" id="license" role="tabpanel">
                    <template x-if="loading.license">
                        <div class="py-4 text-center">
                            <x-ui.skeleton-loader type="circle" class="mb-3 mx-auto" height="80px" />
                            <x-ui.skeleton-loader type="text" class="mb-2 w-75 mx-auto" />
                            <x-ui.skeleton-loader type="text" class="w-50 mx-auto" />
                        </div>
                    </template>

                    <template x-if="!loading.license">
                        <div class="row justify-content-center">
                            <div class="col-md-7">
                                <div class="card kpi-card border-0 text-white overflow-hidden"
                                     :class="{
                                        'bg-gradient-success': license.status,
                                        'bg-gradient-warning': !license.status && license.type === 'TRIAL',
                                        'bg-gradient-danger': !license.status && license.type !== 'TRIAL'
                                     }">
                                    <div class="card-body text-center py-5">
                                        <template x-if="license.type === 'PRO'">
                                            <div>
                                                <div class="license-icon-circle">
                                                    <i class="fas fa-check-circle text-success fa-3x"></i>
                                                </div>
                                                <h3 class="text-white font-weight-bold">Licencia Activa</h3>
                                            </div>
                                        </template>
                                        <template x-if="license.type === 'TRIAL'">
                                            <div>
                                                <div class="license-icon-circle">
                                                    <i class="fas fa-hourglass-half text-warning fa-3x"></i>
                                                </div>
                                                <h3 class="text-white font-weight-bold">Periodo de Prueba</h3>
                                            </div>
                                        </template>
                                        <template x-if="license.type !== 'PRO' && license.type !== 'TRIAL'">
                                            <div>
                                                <div class="license-icon-circle">
                                                    <i class="fas fa-times-circle text-danger fa-3x"></i>
                                                </div>
                                                <h3 class="text-white font-weight-bold">Sin Activación</h3>
                                            </div>
                                        </template>

                                        <p class="mt-3 text-white font-weight-medium" style="opacity: 0.85; font-size: 1.05rem;" x-text="license.message"></p>

                                        <template x-if="license.days_left !== undefined">
                                            <div class="alert mb-0 mx-4 mt-4 text-dark font-weight-bold alert-days-left"
                                                 :class="license.days_left > 7 ? 'alert-light' : 'alert-warning'">
                                                <i class="fas fa-info-circle mr-1"></i>
                                                <strong><span x-text="license.days_left"></span> Días Restantes</strong><br>
                                                <small class="font-weight-normal">Vence el: <span x-text="license.expiration"></span></small>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </x-ui.card>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/premium-ui.css') }}">
    <style>
        .bg-gradient-success { background: linear-gradient(135deg, #2dce89 0%, #2dcecc 100%) !important; }
        .bg-gradient-warning { background: linear-gradient(135deg, #fb6340 0%, #fbb140 100%) !important; }
        .bg-gradient-danger { background: linear-gradient(135deg, #f5365c 0%, #f56036 100%) !important; }
    </style>
@stop

@section('js')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('companySettings', () => ({
                loading: {
                    license: true,
                    data: true
                },
                saving: false,
                license: {},
                form: {
                    rif: '',
                    business_name: '',
                    email: '',
                    phone_primary: '',
                    address: ''
                },
                errors: {},

                init() {
                    this.initCsrf();
                    this.fetchLicense();
                    this.fetchCompanyData();
                },

                async initCsrf() {
                    try {
                        await axios.get('/sanctum/csrf-cookie');
                    } catch (error) {
                        // Si falla, el PUT podría fallar por CSRF, pero los GET funcionan igual
                    }
                },

                async fetchLicense() {
                    this.loading.license = true;
                    try {
                        const response = await axios.get('/api/v1/company/license');
                        this.license = response.data;
                    } catch (error) {
                        console.error('Error fetching license', error);
                        Swal.fire('Error', 'No se pudo cargar el estado de la licencia', 'error');
                    } finally {
                        this.loading.license = false;
                    }
                },

                async fetchCompanyData() {
                    this.loading.data = true;
                    try {
                        const response = await axios.get('/api/v1/company');
                        const data = response.data.data;
                        this.form.rif = data.rif || '';
                        this.form.business_name = data.business_name || '';
                        this.form.email = data.email || '';
                        this.form.phone_primary = data.phone_primary || '';
                        this.form.address = data.address || '';
                    } catch (error) {
                        console.error('Error fetching company data', error);
                        Swal.fire('Error', 'No se pudo cargar la información de la empresa', 'error');
                    } finally {
                        this.loading.data = false;
                    }
                },

                async saveCompanyData() {
                    this.saving = true;
                    this.errors = {};
                    try {
                        const payload = { ...this.form };
                        await axios.put('/api/v1/company', payload);

                        Swal.fire({
                            title: '¡Guardado!',
                            text: 'Configuración actualizada correctamente.',
                            icon: 'success',
                            confirmButtonText: 'OK',
                            timer: 2000
                        });
                    } catch (error) {
                        if (error.response && error.response.status === 422) {
                            this.errors = error.response.data.errors;
                            Swal.fire('Atención', 'Revisa los campos con errores.', 'warning');
                        } else {
                            console.error('Error saving data', error);
                            Swal.fire('Error', 'Hubo un error al guardar la información.', 'error');
                        }
                    } finally {
                        this.saving = false;
                    }
                }
            }));
        });
    </script>
@stop