@extends('layouts.admin')

@section('title', 'Settings')
@section('page-title', 'Settings')
@section('breadcrumb')
    <li class="breadcrumb-item active">Settings</li>
@endsection

@section('styles')
<style>
    .logo-preview {
        max-width: 200px;
        max-height: 200px;
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 5px;
        margin-top: 10px;
    }
    .logo-actions {
        margin-top: 10px;
    }
    .file-input-wrapper {
        position: relative;
        overflow: hidden;
        display: inline-block;
    }
    .file-input-wrapper input[type=file] {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    .tnc-preview {
        max-height: 200px;
        overflow-y: auto;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 5px;
        border: 1px solid #ddd;
        margin-top: 10px;
        font-size: 13px;
        line-height: 1.6;
    }
    .tnc-preview ol, .tnc-preview ul {
        padding-left: 20px;
    }
    .tnc-preview ol li, .tnc-preview ul li {
        margin-bottom: 5px;
    }
    .tnc-actions {
        margin-top: 10px;
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-building"></i> Company Settings
                </h3>
            </div>
            <div class="card-body">
                <form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <label>Company Name</label>
                        <input type="text" class="form-control @error('company_name') is-invalid @enderror" 
                               name="company_name" value="{{ old('company_name', $companySettings['company_name'] ?? '') }}">
                        @error('company_name')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label>Company Registration Number</label>
                        <input type="text" class="form-control @error('company_registration_number') is-invalid @enderror" 
                               name="company_registration_number" value="{{ old('company_registration_number', $companySettings['company_registration_number'] ?? '') }}">
                        @error('company_registration_number')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label>Company Address</label>
                        <textarea class="form-control @error('company_address') is-invalid @enderror" 
                                  name="company_address" rows="3">{{ old('company_address', $companySettings['company_address'] ?? '') }}</textarea>
                        @error('company_address')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Company Phone</label>
                                <input type="text" class="form-control @error('company_phone') is-invalid @enderror" 
                                       name="company_phone" value="{{ old('company_phone', $companySettings['company_phone'] ?? '') }}">
                                @error('company_phone')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Company Email</label>
                                <input type="email" class="form-control @error('company_email') is-invalid @enderror" 
                                       name="company_email" value="{{ old('company_email', $companySettings['company_email'] ?? '') }}">
                                @error('company_email')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Bank Account Details</label>
                        <input type="text" class="form-control @error('bank_account') is-invalid @enderror" 
                               name="bank_account" value="{{ old('bank_account', $companySettings['bank_account'] ?? '') }}" 
                               placeholder="e.g., Public Bank - 3813555112">
                        <small class="text-muted">This will appear on invoices in the terms & conditions section.</small>
                        @error('bank_account')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

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

        <div class="card mt-3">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-image"></i> Company Logo
                </h3>
            </div>
            <div class="card-body">
                <form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="text-center logo-preview-container">
                        @if($logoUrl)
                            <img src="{{ $logoUrl }}" alt="Company Logo" class="logo-preview">
                            <div class="logo-actions">
                                <a href="{{ route('settings.remove-logo') }}" class="btn btn-danger btn-sm" 
                                onclick="return confirm('Are you sure you want to remove the logo?')">
                                    <i class="fas fa-trash"></i> Remove Logo
                                </a>
                            </div>
                        @else
                            <div class="text-muted py-4 no-logo-placeholder">
                                <i class="fas fa-image fa-3x mb-3"></i>
                                <p>No logo uploaded yet.</p>
                            </div>
                        @endif
                    </div>

                    <div class="form-group mt-3">
                        <label for="logoInput">Upload New Logo</label>
                        <input type="file" name="company_logo" id="logoInput" class="form-control-file @error('company_logo') is-invalid @enderror" accept="image/*">
                        <small class="form-text text-muted">Supported formats: JPG, PNG, GIF, SVG. Max size: 2MB</small>
                        @error('company_logo')
                            <span class="text-danger d-block mt-1">{{ $message }}</span>
                        @enderror
                    </div>

                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-upload"></i> Upload Logo
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-file-invoice"></i> Invoice Settings
                </h3>
            </div>
            <div class="card-body">
                <form action="{{ route('settings.update') }}" method="POST">
                    @csrf
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i> 
                        Invoice numbers will be generated automatically using these prefixes.
                        Example: <strong>INV-000001</strong>, <strong>QUO-000001</strong>
                    </div>

                    <div class="form-group">
                        <label>Invoice Prefix</label>
                        <input type="text" class="form-control @error('invoice_prefix') is-invalid @enderror" 
                               name="invoice_prefix" value="{{ old('invoice_prefix', $invoiceSettings['invoice_prefix'] ?? 'INV-') }}" 
                               placeholder="INV-">
                        <small class="text-muted">Current format: {{ old('invoice_prefix', $invoiceSettings['invoice_prefix'] ?? 'INV-') }}000001</small>
                        @error('invoice_prefix')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label>Quotation Prefix</label>
                        <input type="text" class="form-control @error('quotation_prefix') is-invalid @enderror" 
                               name="quotation_prefix" value="{{ old('quotation_prefix', $invoiceSettings['quotation_prefix'] ?? 'QUO-') }}" 
                               placeholder="QUO-">
                        <small class="text-muted">Current format: {{ old('quotation_prefix', $invoiceSettings['quotation_prefix'] ?? 'QUO-') }}000001</small>
                        @error('quotation_prefix')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Next Invoice Number</label>
                                <div class="input-group">
                                    <span class="input-group-text">{{ old('invoice_prefix', $invoiceSettings['invoice_prefix'] ?? 'INV-') }}</span>
                                    <input type="text" class="form-control" value="{{ str_pad(($invoiceCount ?? 0) + 1, 6, '0', STR_PAD_LEFT) }}" disabled>
                                </div>
                                <small class="text-muted">Auto-generated based on existing invoices</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Next Quotation Number</label>
                                <div class="input-group">
                                    <span class="input-group-text">{{ old('quotation_prefix', $invoiceSettings['quotation_prefix'] ?? 'QUO-') }}</span>
                                    <input type="text" class="form-control" value="{{ str_pad(($quotationCount ?? 0) + 1, 6, '0', STR_PAD_LEFT) }}" disabled>
                                </div>
                                <small class="text-muted">Auto-generated based on existing quotations</small>
                            </div>
                        </div>
                    </div>

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

        <div class="card mt-3">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-file-contract"></i> Terms & Conditions
                </h3>
                <div class="card-tools">
                    <a href="{{ route('settings.preview-tnc') }}" target="_blank" class="btn btn-info btn-sm">
                        <i class="fas fa-eye"></i> Preview
                    </a>
                </div>
            </div>
            <div class="card-body">
                <form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="form-group">
                        <label>Terms & Conditions Title</label>
                        <input type="text" class="form-control @error('tnc_title') is-invalid @enderror" 
                               name="tnc_title" value="{{ old('tnc_title', $tncSettings['tnc_title'] ?? 'Terms & Conditions') }}" 
                               placeholder="Terms & Conditions">
                        @error('tnc_title')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- <div class="form-group">
                        <label>TNC Content</label>
                        <div class="file-input-wrapper mb-2">
                            <button type="button" class="btn btn-secondary">
                                <i class="fas fa-file-upload"></i> Upload HTML/TXT File
                            </button>
                            <input type="file" name="tnc_file" accept=".html,.htm,.txt" class="form-control-file">
                        </div>
                        <small class="text-muted">Upload HTML or TXT file containing your TNC content. Max size: 2MB</small>
                        @error('tnc_file')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div> -->

                    <div class="form-group">
                        <label>Paste HTML content below</label>
                        <textarea class="form-control @error('tnc_content') is-invalid @enderror" 
                                  name="tnc_content" rows="10" id="tncEditor">{{ old('tnc_content', $tncContent) }}</textarea>
                        @error('tnc_content')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                        <small class="text-muted">
                            <i class="fas fa-info-circle"></i> 
                            You can use HTML tags like &lt;ol&gt;, &lt;ul&gt;, &lt;li&gt;, &lt;strong&gt;, &lt;em&gt;, etc.
                        </small>
                    </div>

                    @if($tncContent)
                        <div class="tnc-preview">
                            {!! $tncContent !!}
                        </div>
                        <div class="tnc-actions">
                            <a href="{{ route('settings.remove-tnc') }}" class="btn btn-danger btn-sm" 
                               onclick="return confirm('Are you sure you want to remove the TNC content?')">
                                <i class="fas fa-trash"></i> Remove TNC
                            </a>
                        </div>
                    @endif

                    <button type="submit" class="btn btn-primary mt-2">
                        <i class="fas fa-save"></i> Save TNC
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Preview logo before upload
    $('#logoInput').change(function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('.logo-preview').remove();
                $('.text-center').prepend(
                    '<img src="' + e.target.result + '" alt="Logo Preview" class="logo-preview">'
                );
            }
            reader.readAsDataURL(file);
        }
    });

    // File upload preview
    $('input[name="tnc_file"]').change(function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#tncEditor').val(e.target.result);
            }
            reader.readAsText(file);
        }
    });
});
</script>
@endsection