@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Declaration Window Settings</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{{ $alias }}/home">Home</a></li>
                    <li class="breadcrumb-item"><a href="/{{ $alias }}/tdx/dashboard">TDS</a></li>
                    <li class="breadcrumb-item active">Settings</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section id="tdx-settings">
        {{-- Flash Messages --}}
        <div class="row">
            <div class="col-12">
                @if(session('status'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <div class="alert-body">{{ session('status') }}</div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <div class="alert-body">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
            </div>
        </div>

        {{-- Add New Setting --}}
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Add / Update Declaration Window</h4>
                    </div>
                    <div class="card-body">
                        <form action="/{{ $alias }}/tdx/settings" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-md-3 mb-1">
                                    <label class="form-label" for="financial_year_id">Financial Year <span class="text-danger">*</span></label>
                                    <select class="form-select" name="financial_year_id" id="financial_year_id" required>
                                        <option value="">Select FY</option>
                                        @foreach($financialYears as $fy)
                                            <option value="{{ $fy->id }}" {{ old('financial_year_id') == $fy->id ? 'selected' : '' }}>
                                                {{ $fy->label }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2 mb-1">
                                    <label class="form-label" for="declaration_status">Status <span class="text-danger">*</span></label>
                                    <select class="form-select" name="declaration_status" id="declaration_status" required>
                                        <option value="open" {{ old('declaration_status') == 'open' ? 'selected' : '' }}>Open</option>
                                        <option value="closed" {{ old('declaration_status', 'closed') == 'closed' ? 'selected' : '' }}>Closed</option>
                                        <option value="locked" {{ old('declaration_status') == 'locked' ? 'selected' : '' }}>Locked</option>
                                    </select>
                                </div>
                                <div class="col-md-2 mb-1">
                                    <label class="form-label" for="declaration_start_date">Start Date</label>
                                    <input type="text" class="form-control flatpickr" name="declaration_start_date" id="declaration_start_date" 
                                           value="{{ old('declaration_start_date') }}" placeholder="YYYY-MM-DD">
                                </div>
                                <div class="col-md-2 mb-1">
                                    <label class="form-label" for="declaration_end_date">End Date</label>
                                    <input type="text" class="form-control flatpickr" name="declaration_end_date" id="declaration_end_date" 
                                           value="{{ old('declaration_end_date') }}" placeholder="YYYY-MM-DD">
                                </div>
                                <div class="col-md-3 mb-1">
                                    <label class="form-label" for="tds_component_type_id">TDS Payroll Component</label>
                                    <select class="form-select" name="tds_component_type_id" id="tds_component_type_id">
                                        <option value="">-- Not Configured --</option>
                                        @foreach($deductionComponents as $comp)
                                            <option value="{{ $comp->id }}" {{ old('tds_component_type_id') == $comp->id ? 'selected' : '' }}>
                                                {{ $comp->name }}{{ $comp->alias ? ' ('.$comp->alias.')' : '' }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <small class="text-muted">Deduction component where TDS is applied during payroll</small>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3 mb-1">
                                    <button type="submit" class="btn btn-primary">
                                        <i data-feather="save" class="me-50"></i> Save Setting
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {{-- Existing Settings --}}
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Declaration Window Settings — {{ $organization->name }}</h4>
                    </div>
                    <div class="card-datatable">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Financial Year</th>
                                    <th>Status</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>TDS Component</th>
                                    <th>Window</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($settings as $index => $setting)
                                    <tr id="row-{{ $setting->id }}">
                                        <td>{{ $settings->firstItem() + $index }}</td>
                                        <td>{{ $setting->financialYear->label ?? 'N/A' }}</td>
                                        <td>
                                            @if($setting->declaration_status === 'open')
                                                <span class="badge badge-light-success">Open</span>
                                            @elseif($setting->declaration_status === 'closed')
                                                <span class="badge badge-light-warning">Closed</span>
                                            @else
                                                <span class="badge badge-light-danger">Locked</span>
                                            @endif
                                        </td>
                                        <td>{{ $setting->declaration_start_date ? $setting->declaration_start_date->format('d M Y') : '—' }}</td>
                                        <td>{{ $setting->declaration_end_date ? $setting->declaration_end_date->format('d M Y') : '—' }}</td>
                                        <td>
                                            @php
                                                $tdsComp = $setting->tds_component_type_id
                                                    ? $deductionComponents->firstWhere('id', $setting->tds_component_type_id)
                                                    : null;
                                            @endphp
                                            @if($tdsComp)
                                                <span class="badge badge-light-primary">{{ $tdsComp->name }}</span>
                                            @else
                                                <span class="text-muted small">—</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($setting->isDeclarationOpen())
                                                <span class="badge badge-light-success">
                                                    <i data-feather="unlock" style="width:12px;height:12px;" class="me-25"></i> Open Now
                                                </span>
                                            @else
                                                <span class="badge badge-light-secondary">
                                                    <i data-feather="lock" style="width:12px;height:12px;" class="me-25"></i> Not Open
                                                </span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="d-flex">
                                                <button class="btn btn-sm btn-outline-primary me-50 btn-edit"
                                                        data-id="{{ $setting->id }}"
                                                        data-status="{{ $setting->declaration_status }}"
                                                        data-start="{{ $setting->declaration_start_date ? $setting->declaration_start_date->format('Y-m-d') : '' }}"
                                                        data-end="{{ $setting->declaration_end_date ? $setting->declaration_end_date->format('Y-m-d') : '' }}"
                                                        data-tds-component="{{ $setting->tds_component_type_id ?? '' }}"
                                                        title="Edit">
                                                    <i data-feather="edit-2" class="font-small-4"></i>
                                                </button>
                                                <form action="/{{ $alias }}/tdx/settings/{{ $setting->id }}" method="POST" class="d-inline"
                                                      onsubmit="return confirm('Delete this setting?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
                                                        <i data-feather="trash-2" class="font-small-4"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-2">No settings configured yet.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if($settings->hasPages())
                        <div class="card-footer">
                            <div class="d-flex justify-content-center">
                                {{ $settings->links() }}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    {{-- Edit Modal --}}
    <div class="modal fade" id="editModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="editForm" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Declaration Window</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-1">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select class="form-select" name="declaration_status" id="edit_declaration_status" required>
                                <option value="open">Open</option>
                                <option value="closed">Closed</option>
                                <option value="locked">Locked</option>
                            </select>
                        </div>
                        <div class="mb-1">
                            <label class="form-label">Start Date</label>
                            <input type="text" class="form-control flatpickr" name="declaration_start_date" id="edit_start_date" placeholder="YYYY-MM-DD">
                        </div>
                        <div class="mb-1">
                            <label class="form-label">End Date</label>
                            <input type="text" class="form-control flatpickr" name="declaration_end_date" id="edit_end_date" placeholder="YYYY-MM-DD">
                        </div>
                        <div class="mb-1">
                            <label class="form-label">TDS Payroll Component</label>
                            <select class="form-select" name="tds_component_type_id" id="edit_tds_component_type_id">
                                <option value="">-- Not Configured --</option>
                                @foreach($deductionComponents as $comp)
                                    <option value="{{ $comp->id }}">
                                        {{ $comp->name }}{{ $comp->alias ? ' ('.$comp->alias.')' : '' }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted">Deduction component where TDS is applied during payroll</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('footer-script')
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script>
        $(document).ready(function () {
            if (feather) feather.replace();

            $('.flatpickr').flatpickr({ dateFormat: 'Y-m-d' });

            // Edit button click
            $('.btn-edit').on('click', function () {
                const id           = $(this).data('id');
                const status       = $(this).data('status');
                const start        = $(this).data('start');
                const end          = $(this).data('end');
                const tdsComponent = $(this).data('tds-component');

                $('#editForm').attr('action', '/{{ $alias }}/tdx/settings/' + id);
                $('#edit_declaration_status').val(status);
                $('#edit_tds_component_type_id').val(tdsComponent || '');

                const startPicker = document.getElementById('edit_start_date')._flatpickr;
                const endPicker   = document.getElementById('edit_end_date')._flatpickr;
                if (startPicker) startPicker.setDate(start || '', true);
                if (endPicker)   endPicker.setDate(end   || '', true);

                new bootstrap.Modal(document.getElementById('editModal')).show();
            });
        });
    </script>
@endpush