@extends('layouts.app')

@section('title', 'Company Settings')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h1 class="h3">Company Settings</h1>
                <a href="{{ route('dashboard') }}" class="btn btn-secondary">Back to Dashboard</a>
            </div>
        </div>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <h5 class="alert-heading">Error</h5>
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Tab Navigation -->
    <ul class="nav nav-tabs mb-4" id="settingsTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="billing-tab" data-bs-toggle="tab" data-bs-target="#billing" type="button" role="tab" aria-controls="billing" aria-selected="true">
                <i class="fas fa-calendar me-2"></i>Billing Settings
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="applications-tab" data-bs-toggle="tab" data-bs-target="#applications" type="button" role="tab" aria-controls="applications" aria-selected="false">
                <i class="fas fa-file-alt me-2"></i>New Applications
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="logo-tab" data-bs-toggle="tab" data-bs-target="#logo" type="button" role="tab" aria-controls="logo" aria-selected="false">
                <i class="fas fa-image me-2"></i>Company Logo
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="document-text-tab" data-bs-toggle="tab" data-bs-target="#document-text" type="button" role="tab" aria-controls="document-text" aria-selected="false">
                <i class="fas fa-align-left me-2"></i>Document Text
            </button>
        </li>
    </ul>

    <div class="tab-content" id="settingsTabsContent">
        <!-- Billing Settings Tab -->
        <div class="tab-pane fade show active" id="billing" role="tabpanel" aria-labelledby="billing-tab">
            <div class="row">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Configure Fixed Billing Cycle Dates</h5>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('company-settings.update') }}" method="POST">
                                @csrf
                                @method('PUT')

                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i>
                            Set the fixed day of each month when payment is due and when disconnection occurs.
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="billing_due_days" class="form-label">
                                    <i class="fas fa-calendar-check"></i> Payment Due Day of Month
                                </label>
                                <div class="input-group">
                                    <input 
                                        type="number" 
                                        class="form-control @error('billing_due_days') is-invalid @enderror" 
                                        id="billing_due_days" 
                                        name="billing_due_days" 
                                        value="{{ old('billing_due_days', $company->billing_due_days) }}"
                                        min="1"
                                        max="31"
                                        required
                                    >
                                    <span class="input-group-text">of month</span>
                                </div>
                                <small class="form-text text-muted d-block mt-2">
                                    Example: If set to 15, payment is due on the 15th of each month
                                </small>
                                @error('billing_due_days')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="disconnection_days" class="form-label">
                                    <i class="fas fa-unlink"></i> Disconnection Day of Month
                                </label>
                                <div class="input-group">
                                    <input 
                                        type="number" 
                                        class="form-control @error('disconnection_days') is-invalid @enderror" 
                                        id="disconnection_days" 
                                        name="disconnection_days" 
                                        value="{{ old('disconnection_days', $company->disconnection_days) }}"
                                        min="1"
                                        max="31"
                                        required
                                    >
                                    <span class="input-group-text">of month</span>
                                </div>
                                <small class="form-text text-muted d-block mt-2">
                                    Example: If set to 25, service disconnects on the 25th of each month (if unpaid)
                                </small>
                                @error('disconnection_days')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Disconnection Method Selection -->
                        <div class="card mt-4 mb-4">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="fas fa-cog text-primary"></i> Disconnection Method</h6>
                            </div>
                            <div class="card-body">
                                <div class="form-check mb-3">
                                    <input 
                                        class="form-check-input" 
                                        type="radio" 
                                        id="disconnect_method_fixed" 
                                        name="disconnection_by_due_date" 
                                        value="0"
                                        {{ old('disconnection_by_due_date', $company->disconnection_by_due_date) == 0 ? 'checked' : '' }}
                                    >
                                    <label class="form-check-label" for="disconnect_method_fixed">
                                        <strong>Fixed Day of Month</strong>
                                        <small class="d-block text-muted mt-1">
                                            Disconnect on a specific day each month (e.g., 25th of every month). Use the above "Disconnection Day of Month" setting.
                                        </small>
                                    </label>
                                </div>

                                <div class="form-check">
                                    <input 
                                        class="form-check-input" 
                                        type="radio" 
                                        id="disconnect_method_due_date" 
                                        name="disconnection_by_due_date" 
                                        value="1"
                                        {{ old('disconnection_by_due_date', $company->disconnection_by_due_date) == 1 ? 'checked' : '' }}
                                    >
                                    <label class="form-check-label" for="disconnect_method_due_date">
                                        <strong>Days After Due Date</strong>
                                        <small class="d-block text-muted mt-1">
                                            Disconnect based on number of days after the billing due date (e.g., 15 days after due date).
                                        </small>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Disconnection Days After Due Date Setting -->
                        <div id="disconnection_after_due_section" class="row mb-3">
                            <div class="col-md-6">
                                <label for="disconnection_days_after_due" class="form-label">
                                    <i class="fas fa-hourglass-end"></i> Days After Due Date to Disconnect
                                </label>
                                <div class="input-group">
                                    <input 
                                        type="number" 
                                        class="form-control @error('disconnection_days_after_due') is-invalid @enderror" 
                                        id="disconnection_days_after_due" 
                                        name="disconnection_days_after_due" 
                                        value="{{ old('disconnection_days_after_due', $company->disconnection_days_after_due) }}"
                                        min="1"
                                        max="90"
                                    >
                                    <span class="input-group-text">days</span>
                                </div>
                                <small class="form-text text-muted d-block mt-2">
                                    Example: If set to 15, service will be disconnected 15 days after the due date if payment is not made.
                                </small>
                                @error('disconnection_days_after_due')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- New Connection Setup Fee Settings -->
                        <div class="card mt-4 mb-4">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="fas fa-plus-circle text-success"></i> New Connection Setup Fee</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="new_connection_setup_fee" class="form-label">Setup Fee Amount (₱)</label>
                                    <div class="input-group">
                                        <span class="input-group-text">₱</span>
                                        <input 
                                            type="number" 
                                            step="0.01"
                                            class="form-control @error('new_connection_setup_fee') is-invalid @enderror" 
                                            id="new_connection_setup_fee" 
                                            name="new_connection_setup_fee" 
                                            value="{{ old('new_connection_setup_fee', $settings->new_connection_setup_fee ?? 0) }}"
                                            placeholder="0.00"
                                            min="0"
                                        >
                                    </div>
                                    <small class="form-text text-muted d-block mt-2">One-time fee charged for new customer connections. This will be the default setup fee for new subscriber applications.</small>
                                    @error('new_connection_setup_fee')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Late Payment Fee Settings -->
                        <div class="card mt-4 mb-4">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="fas fa-exclamation-triangle text-danger"></i> Late Payment Fee Settings</h6>
                            </div>
                            <div class="card-body">
                                <div class="form-check form-switch mb-3">
                                    <input type="hidden" name="late_payment_fee_enabled" value="0">
                                    <input 
                                        class="form-check-input" 
                                        type="checkbox" 
                                        id="late_payment_fee_enabled" 
                                        name="late_payment_fee_enabled"
                                        value="1"
                                        {{ old('late_payment_fee_enabled', $company->late_payment_fee_enabled) ? 'checked' : '' }}
                                        onchange="toggleLatePaymentFee()"
                                    >
                                    <label class="form-check-label" for="late_payment_fee_enabled">
                                        Enable late payment fees
                                    </label>
                                </div>

                                <div id="latePaymentFeeOptions" style="display: {{ old('late_payment_fee_enabled', $company->late_payment_fee_enabled) ? 'block' : 'none' }};">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="late_payment_fee_type" class="form-label">Fee Type</label>
                                            <select class="form-select @error('late_payment_fee_type') is-invalid @enderror" id="late_payment_fee_type" name="late_payment_fee_type">
                                                <option value="percentage" {{ old('late_payment_fee_type', $company->late_payment_fee_type) === 'percentage' ? 'selected' : '' }}>Percentage (%)</option>
                                                <option value="fixed" {{ old('late_payment_fee_type', $company->late_payment_fee_type) === 'fixed' ? 'selected' : '' }}>Fixed Amount (₱)</option>
                                            </select>
                                            @error('late_payment_fee_type')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label for="late_payment_fee_rate" class="form-label">Fee Rate/Amount</label>
                                            <div class="input-group">
                                                <input 
                                                    type="number" 
                                                    step="0.01"
                                                    class="form-control @error('late_payment_fee_rate') is-invalid @enderror" 
                                                    id="late_payment_fee_rate" 
                                                    name="late_payment_fee_rate" 
                                                    value="{{ old('late_payment_fee_rate', $company->late_payment_fee_rate) }}"
                                                    placeholder="0.00"
                                                >
                                                <span class="input-group-text" id="late_payment_fee_unit">%</span>
                                            </div>
                                            <small class="form-text text-muted d-block mt-2">Enter percentage (0-100) or fixed amount</small>
                                            @error('late_payment_fee_rate')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- Penalty Frequency -->
                                    <div class="mt-2">
                                        <label class="form-label d-block">Penalty Frequency</label>

                                        <div class="form-check mb-2">
                                            <input
                                                class="form-check-input"
                                                type="radio"
                                                id="late_fee_frequency_one_time"
                                                name="late_payment_fee_frequency"
                                                value="one_time"
                                                {{ old('late_payment_fee_frequency', $company->late_payment_fee_frequency ?? 'monthly') === 'one_time' ? 'checked' : '' }}
                                            >
                                            <label class="form-check-label" for="late_fee_frequency_one_time">
                                                <strong>One-time Penalty</strong>
                                                <small class="d-block text-muted">
                                                    The penalty is charged only once when the billing becomes overdue.
                                                </small>
                                            </label>
                                        </div>

                                        <div class="form-check">
                                            <input
                                                class="form-check-input"
                                                type="radio"
                                                id="late_fee_frequency_monthly"
                                                name="late_payment_fee_frequency"
                                                value="monthly"
                                                {{ old('late_payment_fee_frequency', $company->late_payment_fee_frequency ?? 'monthly') === 'monthly' ? 'checked' : '' }}
                                            >
                                            <label class="form-check-label" for="late_fee_frequency_monthly">
                                                <strong>Monthly Recurring</strong>
                                                <small class="d-block text-muted">
                                                    The penalty is charged every month until the billing is fully paid.
                                                </small>
                                            </label>
                                        </div>
                                        @error('late_payment_fee_frequency')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Reconnection Fee Settings -->
                        <div class="card mt-4 mb-4">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="fas fa-plug text-warning"></i> Reconnection Fee Settings</h6>
                            </div>
                            <div class="card-body">
                                <div class="form-check form-switch mb-3">
                                    <input type="hidden" name="reconnection_fee_enabled" value="0">
                                    <input 
                                        class="form-check-input" 
                                        type="checkbox" 
                                        id="reconnection_fee_enabled" 
                                        name="reconnection_fee_enabled"
                                        value="1"
                                        {{ old('reconnection_fee_enabled', $company->reconnection_fee_enabled) ? 'checked' : '' }}
                                        onchange="toggleReconnectionFee()"
                                    >
                                    <label class="form-check-label" for="reconnection_fee_enabled">
                                        Enable reconnection fees
                                    </label>
                                </div>

                                <div id="reconnectionFeeOptions" style="display: {{ old('reconnection_fee_enabled', $company->reconnection_fee_enabled) ? 'block' : 'none' }};">
                                    <div class="mb-3">
                                        <label for="reconnection_fee_amount" class="form-label">Reconnection Fee Amount (₱)</label>
                                        <div class="input-group">
                                            <span class="input-group-text">₱</span>
                                            <input 
                                                type="number" 
                                                step="0.01"
                                                class="form-control @error('reconnection_fee_amount') is-invalid @enderror" 
                                                id="reconnection_fee_amount" 
                                                name="reconnection_fee_amount" 
                                                value="{{ old('reconnection_fee_amount', $company->reconnection_fee_amount) }}"
                                                placeholder="0.00"
                                            >
                                        </div>
                                        <small class="form-text text-muted d-block mt-2">Fixed amount charged when reconnecting a disconnected service</small>
                                        @error('reconnection_fee_amount')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Meter Reading Settings -->
                        <div class="card mt-4 mb-4">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="fas fa-tachometer-alt text-info"></i> Meter Reading Settings</h6>
                            </div>
                            <div class="card-body">
                                <div class="form-check form-switch">
                                    <input type="hidden" name="enable_block_lot_search" value="0">
                                    <input
                                        class="form-check-input"
                                        type="checkbox"
                                        id="enable_block_lot_search"
                                        name="enable_block_lot_search"
                                        value="1"
                                        {{ old('enable_block_lot_search', $settings?->enable_block_lot_search ?? false) ? 'checked' : '' }}
                                    >
                                    <label class="form-check-label" for="enable_block_lot_search">
                                        Enable <strong>Block &amp; Lot search</strong> in meter reading
                                        <small class="d-block text-muted mt-1">
                                            When enabled, meter readers can search customers by block and lot number
                                            (e.g. "blk 4 lot 1") and pick from the list of clients at that block/lot.
                                        </small>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Save Settings
                            </button>
                            <a href="{{ route('dashboard') }}" class="btn btn-secondary">
                                Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card bg-light">
                <div class="card-header">
                    <h5 class="mb-0">Current Configuration</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label text-muted"><strong>Payment Due Day</strong></label>
                        <p class="h4 text-primary">Day {{ $company->billing_due_days }}<sup>th</sup></p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted"><strong>Disconnection Day</strong></label>
                        @if($company->disconnection_by_due_date)
                            <p class="h4 text-warning">
                                <i class="fas fa-hourglass-end"></i> {{ $company->disconnection_days_after_due }} days after due
                            </p>
                        @else
                            <p class="h4 text-danger">Day {{ $company->disconnection_days }}<sup>th</sup></p>
                        @endif
                    </div>
                    <hr>
                    <div class="mb-3">
                        <label class="form-label text-muted"><strong>Late Payment Fee</strong></label>
                        @if($company->late_payment_fee_enabled)
                            <p class="text-success">
                                <i class="fas fa-check-circle"></i> Enabled
                                <br>
                                <small>
                                    {{ $company->late_payment_fee_type === 'percentage' ? $company->late_payment_fee_rate . '%' : '₱' . number_format($company->late_payment_fee_rate, 2) }}
                                    &mdash; {{ ($company->late_payment_fee_frequency ?? 'monthly') === 'one_time' ? 'One-time penalty' : 'Charged monthly until paid' }}
                                </small>
                            </p>
                        @else
                            <p class="text-muted">
                                <i class="fas fa-times-circle"></i> Disabled
                            </p>
                        @endif
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted"><strong>Reconnection Fee</strong></label>
                        @if($company->reconnection_fee_enabled)
                            <p class="text-success">
                                <i class="fas fa-check-circle"></i> Enabled
                                <br>
                                <small>₱{{ number_format($company->reconnection_fee_amount, 2) }}</small>
                            </p>
                        @else
                            <p class="text-muted">
                                <i class="fas fa-times-circle"></i> Disabled
                            </p>
                        @endif
                    </div>
                    <hr>
                    <div class="alert alert-info mb-0">
                        <small>
                            <strong>Billing & Disconnection Schedule:</strong>
                            <ul class="mb-0 mt-2">
                                <li>Billings generated monthly</li>
                                <li>Payment due on day <strong>{{ $company->billing_due_days }}</strong></li>
                                @if($company->disconnection_by_due_date)
                                    <li>If unpaid, service disconnects <strong>{{ $company->disconnection_days_after_due }} days after due date</strong></li>
                                @else
                                    <li>If unpaid, service disconnects on day <strong>{{ $company->disconnection_days }}</strong></li>
                                @endif
                            </ul>
                        </small>
                    </div>
                </div>
            </div>
        </div>
            </div>
        </div>

        <!-- New Applications Tab -->
        <div class="tab-pane fade" id="applications" role="tabpanel" aria-labelledby="applications-tab">
            <div class="row">
                <div class="col-md-8">
                    <!-- Application URL Card -->
                    <div class="card mb-4">
                        <div class="card-header bg-light">
                            <h5 class="mb-0"><i class="fas fa-link me-2"></i> New Application URL</h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>
                                <strong>Share this link with customers</strong> so they can submit new service applications. The link is unique to your company and cannot be guessed by others.
                            </div>

                            <!-- URL Display -->
                            <div class="mb-4">
                                <label class="form-label fw-bold">Application URL</label>
                                <div class="input-group">
                                    <input 
                                        type="text" 
                                        class="form-control form-control-lg" 
                                        id="applicationUrl"
                                        value="{{ url('/apply/' . $company->slug) }}"
                                        readonly
                                    >
                                    <button class="btn btn-primary" type="button" onclick="copyToClipboard('applicationUrl')" title="Copy URL">
                                        <i class="fas fa-copy me-1"></i> Copy
                                    </button>
                                </div>
                                <small class="form-text text-muted d-block mt-2">
                                    This is a public link that anyone can access. Share it with customers via email, SMS, website, or social media.
                                </small>
                            </div>

                            <!-- QR Code Section -->
                            <div class="mb-4">
                                <label class="form-label fw-bold">QR Code</label>
                                <div class="text-center p-4 bg-light rounded border">
                                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=300x300&data={{ urlencode(url('/apply/' . $company->slug)) }}" 
                                         alt="Application URL QR Code" 
                                         class="img-fluid"
                                         style="max-width: 300px; height: auto;">
                                    <p class="text-muted mt-3 mb-0">Customers can scan this QR code with their phone to access the application form</p>
                                </div>
                            </div>

                            <!-- Usage Instructions -->
                            <div class="card bg-light border-light mt-4">
                                <div class="card-header bg-white border-bottom">
                                    <h6 class="mb-0"><i class="fas fa-clipboard-list me-2"></i> How to Share</h6>
                                </div>
                                <div class="card-body">
                                    <ul class="list-unstyled mb-0">
                                        <li class="mb-3">
                                            <strong><i class="fas fa-envelope text-primary me-2"></i> Email Campaign:</strong>
                                            Include the link in marketing emails to potential customers
                                        </li>
                                        <li class="mb-3">
                                            <strong><i class="fas fa-mobile-alt text-success me-2"></i> SMS:</strong>
                                            Send the link via text message to existing customer lists
                                        </li>
                                        <li class="mb-3">
                                            <strong><i class="fas fa-globe text-info me-2"></i> Website:</strong>
                                            Add a button or link on your company website
                                        </li>
                                        <li class="mb-3">
                                            <strong><i class="fas fa-qrcode text-danger me-2"></i> QR Code:</strong>
                                            Print the QR code on brochures, billboards, and business cards
                                        </li>
                                        <li>
                                            <strong><i class="fas fa-share-alt text-warning me-2"></i> Social Media:</strong>
                                            Post the link on Facebook, Instagram, Twitter, etc.
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <!-- Security Note -->
                            <div class="alert alert-success mt-4" role="alert">
                                <i class="fas fa-shield-alt me-2"></i>
                                <strong>Security:</strong> This URL is unique to your company and includes a long random code. Other companies cannot guess or access their competitor's application form.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <!-- QR Code Download Card -->
                    <div class="card sticky-top" style="top: 20px;">
                        <div class="card-header bg-light">
                            <h6 class="mb-0"><i class="fas fa-download me-2"></i> QR Code</h6>
                        </div>
                        <div class="card-body text-center">
                            <div class="p-3 bg-light rounded mb-3">
                                <img src="https://api.qrserver.com/v1/create-qr-code/?size=250x250&data={{ urlencode(url('/apply/' . $company->slug)) }}" 
                                     alt="QR Code" 
                                     class="img-fluid"
                                     id="qrCodeImage"
                                     style="max-width: 250px;">
                            </div>
                            <a href="https://api.qrserver.com/v1/create-qr-code/?size=500x500&data={{ urlencode(url('/apply/' . $company->slug)) }}" 
                               download="application-qr-code.png"
                               class="btn btn-sm btn-primary w-100 mb-2">
                                <i class="fas fa-download me-1"></i> Download QR Code
                            </a>
                            <p class="text-muted small mb-0">Suitable for printing and sharing</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Logo Upload Tab -->
        <div class="tab-pane fade" id="logo" role="tabpanel" aria-labelledby="logo-tab">
            <div class="row">
                <div class="col-md-8">
                    <!-- Logo Display Settings Card -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">Logo Display Settings</h5>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('company-settings.update') }}" method="POST">
                                @csrf
                                @method('PUT')
                                
                                <p class="text-muted mb-4">Control logo display for each billing document type:</p>
                                
                                <!-- PDF Billing Toggle -->
                                <div class="form-check form-switch mb-4 pb-3 border-bottom">
                                    <input type="hidden" name="show_logo_on_pdf" value="0">
                                    <input 
                                        class="form-check-input" 
                                        type="checkbox" 
                                        id="show_logo_on_pdf" 
                                        name="show_logo_on_pdf"
                                        value="1"
                                        {{ old('show_logo_on_pdf', $settings?->show_logo_on_pdf ?? true) ? 'checked' : '' }}
                                    >
                                    <label class="form-check-label" for="show_logo_on_pdf">
                                        <strong><i class="fas fa-file-pdf"></i> Show logo on PDF Billings (A4)</strong>
                                        <small class="d-block text-muted mt-1">
                                            Display company logo on professional A4 PDF billing documents
                                        </small>
                                    </label>
                                </div>

                                <!-- Thermal Billing Toggle -->
                                <div class="form-check form-switch mb-4 pb-3 border-bottom">
                                    <input type="hidden" name="show_logo_on_thermal" value="0">
                                    <input 
                                        class="form-check-input" 
                                        type="checkbox" 
                                        id="show_logo_on_thermal" 
                                        name="show_logo_on_thermal"
                                        value="1"
                                        {{ old('show_logo_on_thermal', $settings?->show_logo_on_thermal ?? true) ? 'checked' : '' }}
                                    >
                                    <label class="form-check-label" for="show_logo_on_thermal">
                                        <strong><i class="fas fa-receipt"></i> Show logo on Thermal Billings (58mm)</strong>
                                        <small class="d-block text-muted mt-1">
                                            Display company logo on thermal printer billing receipts
                                        </small>
                                    </label>
                                </div>

                                <!-- Public Billing Toggle -->
                                <div class="form-check form-switch mb-4 pb-3 border-bottom">
                                    <input type="hidden" name="show_logo_on_public" value="0">
                                    <input
                                        class="form-check-input"
                                        type="checkbox"
                                        id="show_logo_on_public"
                                        name="show_logo_on_public"
                                        value="1"
                                        {{ old('show_logo_on_public', $settings?->show_logo_on_public ?? true) ? 'checked' : '' }}
                                    >
                                    <label class="form-check-label" for="show_logo_on_public">
                                        <strong><i class="fas fa-globe"></i> Show logo on Public/Web Billings</strong>
                                        <small class="d-block text-muted mt-1">
                                            Display company logo on public web-accessible billing statements
                                        </small>
                                    </label>
                                </div>

                                <!-- QR Code Toggle -->
                                <div class="form-check form-switch mb-4">
                                    <input type="hidden" name="show_qr_on_receipt" value="0">
                                    <input
                                        class="form-check-input"
                                        type="checkbox"
                                        id="show_qr_on_receipt"
                                        name="show_qr_on_receipt"
                                        value="1"
                                        {{ old('show_qr_on_receipt', $settings?->show_qr_on_receipt ?? true) ? 'checked' : '' }}
                                    >
                                    <label class="form-check-label" for="show_qr_on_receipt">
                                        <strong><i class="fas fa-qrcode"></i> Show QR code on receipts and billings</strong>
                                        <small class="d-block text-muted mt-1">
                                            Print a QR code on PDF, thermal, and public receipts that links to the online copy of the billing
                                        </small>
                                    </label>
                                </div>

                                <div class="form-group mt-4">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> Save Logo Settings
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Logo Upload Card -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Upload Company Logo</h5>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('company-logo.upload') }}" method="POST" enctype="multipart/form-data">
                                @csrf

                                <div class="mb-4">
                                    <label for="logo_file" class="form-label">
                                        <i class="fas fa-image"></i> Company Logo (PNG, JPG, GIF)
                                    </label>
                                    <input 
                                        type="file" 
                                        class="form-control @error('logo_file') is-invalid @enderror"
                                        id="logo_file"
                                        name="logo_file"
                                        accept="image/png,image/jpeg,image/gif,image/webp"
                                        onchange="previewLogo()"
                                    >
                                    <small class="form-text text-muted d-block mt-2">
                                        Maximum file size: 5MB. Recommended dimensions: 400x200px
                                    </small>
                                    @error('logo_file')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label class="form-label">Preview</label>
                                    <div class="border rounded p-3" style="min-height: 200px; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
                                        @if($company->logo_path)
                                            <img id="logoPreview" src="{{ asset('storage/' . $company->logo_path) }}" alt="Logo" style="max-height: 150px; max-width: 100%;">
                                        @else
                                            <div id="logoPlaceholder" text-center>
                                                <i class="fas fa-image fa-3x" style="color: #ccc;"></i>
                                                <p class="text-muted mt-3">No logo uploaded yet</p>
                                            </div>
                                            <img id="logoPreview" src="" alt="Logo" style="max-height: 150px; max-width: 100%; display: none;">
                                        @endif
                                    </div>
                                </div>

                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-upload"></i> Upload Logo
                                    </button>
                                    @if($company->logo_path)
                                        <a href="{{ route('company-logo.delete') }}" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete the logo?')">
                                            <i class="fas fa-trash"></i> Delete Logo
                                        </a>
                                    @endif
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card bg-light">
                        <div class="card-header">
                            <h5 class="mb-0">Logo Information</h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-info mb-0">
                                <small>
                                    <strong>Logo Guidelines:</strong>
                                    <ul class="mb-0 mt-2">
                                        <li>Supports PNG, JPG, GIF, WebP formats</li>
                                        <li>Maximum size: 5MB</li>
                                        <li>Recommended: 400x200px or larger</li>
                                        <li>Used in receipts and documents</li>
                                        <li>Upload a logo with transparent background for best results</li>
                                    </ul>
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Document Text Tab -->
        <div class="tab-pane fade" id="document-text" role="tabpanel" aria-labelledby="document-text-tab">
            <div class="row">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Custom Document Footer Text</h5>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('company-settings.update') }}" method="POST">
                                @csrf
                                @method('PUT')

                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    This text is printed at the <strong>bottom of each document, just before the footer</strong>.
                                    Use it for announcements, payment reminders, office hours, or promos. Leave blank to print nothing.
                                </div>

                                <div class="mb-4">
                                    <label for="reading_footer_text" class="form-label">
                                        <strong><i class="fas fa-tachometer-alt text-info me-1"></i> Meter Reading Receipt</strong>
                                    </label>
                                    <textarea
                                        class="form-control @error('reading_footer_text') is-invalid @enderror"
                                        id="reading_footer_text"
                                        name="reading_footer_text"
                                        rows="3"
                                        maxlength="1000"
                                        placeholder="e.g. This is a reading acknowledgement, not an official bill."
                                    >{{ old('reading_footer_text', $settings?->reading_footer_text) }}</textarea>
                                    <small class="form-text text-muted">Shown on reading receipts printed from the mobile app. Max 1000 characters.</small>
                                    @error('reading_footer_text')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label for="billing_footer_text" class="form-label">
                                        <strong><i class="fas fa-file-invoice text-primary me-1"></i> Billing Statement</strong>
                                    </label>
                                    <textarea
                                        class="form-control @error('billing_footer_text') is-invalid @enderror"
                                        id="billing_footer_text"
                                        name="billing_footer_text"
                                        rows="3"
                                        maxlength="1000"
                                        placeholder="e.g. Pay at the office or via GCash 09XX-XXX-XXXX. Bring this bill when paying."
                                    >{{ old('billing_footer_text', $settings?->billing_footer_text) }}</textarea>
                                    <small class="form-text text-muted">Shown on PDF and thermal bills, and on bills printed from the mobile app. Max 1000 characters.</small>
                                    @error('billing_footer_text')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label for="disconnection_footer_text" class="form-label">
                                        <strong><i class="fas fa-unlink text-danger me-1"></i> Disconnection Notice</strong>
                                    </label>
                                    <textarea
                                        class="form-control @error('disconnection_footer_text') is-invalid @enderror"
                                        id="disconnection_footer_text"
                                        name="disconnection_footer_text"
                                        rows="3"
                                        maxlength="1000"
                                        placeholder="e.g. If payment has already been made, please disregard this notice."
                                    >{{ old('disconnection_footer_text', $settings?->disconnection_footer_text) }}</textarea>
                                    <small class="form-text text-muted">Shown on disconnection notice letters and thermal notices. Max 1000 characters.</small>
                                    @error('disconnection_footer_text')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group mt-4">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> Save Document Text
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card bg-light">
                        <div class="card-header">
                            <h5 class="mb-0">Where It Appears</h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-info mb-0">
                                <small>
                                    <strong>Placement:</strong>
                                    <ul class="mb-0 mt-2">
                                        <li>Printed after the document content, right before the standard footer</li>
                                        <li><strong>Reading receipt</strong> — mobile app thermal print</li>
                                        <li><strong>Bill</strong> — A4 PDF, 58mm thermal, and mobile app</li>
                                        <li><strong>Disconnection notice</strong> — letter and 58mm thermal</li>
                                    </ul>
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .card {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
</style>

<script>
function toggleLatePaymentFee() {
    const checkbox = document.getElementById('late_payment_fee_enabled');
    const options = document.getElementById('latePaymentFeeOptions');
    options.style.display = checkbox.checked ? 'block' : 'none';
}

function toggleReconnectionFee() {
    const checkbox = document.getElementById('reconnection_fee_enabled');
    const options = document.getElementById('reconnectionFeeOptions');
    options.style.display = checkbox.checked ? 'block' : 'none';
}

function previewLogo() {
    const fileInput = document.getElementById('logo_file');
    const preview = document.getElementById('logoPreview');
    const placeholder = document.getElementById('logoPlaceholder');
    
    if (fileInput.files && fileInput.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            preview.src = e.target.result;
            preview.style.display = 'block';
            if (placeholder) placeholder.style.display = 'none';
        };
        reader.readAsDataURL(fileInput.files[0]);
    }
}

// Update the unit display based on fee type
document.getElementById('late_payment_fee_type')?.addEventListener('change', function() {
    const unit = document.getElementById('late_payment_fee_unit');
    unit.textContent = this.value === 'percentage' ? '%' : '₱';
});

// Copy to Clipboard Function
function copyToClipboard(elementId) {
    const element = document.getElementById(elementId);
    const text = element.value;
    
    navigator.clipboard.writeText(text).then(() => {
        const button = event.target.closest('button');
        const originalHtml = button.innerHTML;
        button.innerHTML = '<i class="fas fa-check me-1"></i> Copied!';
        button.classList.add('btn-success');
        button.classList.remove('btn-primary');
        
        setTimeout(() => {
            button.innerHTML = originalHtml;
            button.classList.remove('btn-success');
            button.classList.add('btn-primary');
        }, 2000);
    }).catch(() => {
        alert('Failed to copy URL. Please try again.');
    });
}

// Handle disconnection method selection
document.addEventListener('DOMContentLoaded', function() {
    const radioButtons = document.querySelectorAll('input[name="disconnection_by_due_date"]');
    const afterDueSection = document.getElementById('disconnection_after_due_section');
    
    function toggleDisconnectionSection() {
        const isAfterDue = document.querySelector('input[name="disconnection_by_due_date"]:checked').value === '1';
        if (afterDueSection) {
            afterDueSection.style.display = isAfterDue ? 'block' : 'none';
        }
    }
    
    // Toggle on page load
    toggleDisconnectionSection();
    
    // Toggle on radio button change
    radioButtons.forEach(radio => {
        radio.addEventListener('change', toggleDisconnectionSection);
    });
});
</script>
@endsection