@extends('layouts.app')

@section('content')
<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">दरहरू</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item active">दरहरू</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<!-- end page title -->

@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

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                @if (auth()->user()->usertype == 1 || in_array('9', explode(',', auth()->user()->allowed_modules)))
                <!-- Create Form -->
                <div class="row mb-12">
                    <div class="col-lg-12">
                        <div class="card border">
                            <div class="card-header">
                                <h5 class="card-title mb-0">नयाँ दर थप्नुहोस्</h5>
                            </div>
                            <div class="card-body">
                                <form action="{{ route('rates.store') }}" method="POST">
                                    @csrf

                                    <div class="row g-3 align-items-end">
                                        <!-- श्रेणी -->
                                        <div class="col-md-4">
                                            <label for="level_id" class="form-label">श्रेणी <span class="text-danger">*</span></label>
                                            <select class="form-select @error('level_id') is-invalid @enderror" id="level_id" name="level_id" required>
                                                <option value="">श्रेणी छान्नुहोस्</option>
                                                @foreach($levels as $level)
                                                    <option value="{{ $level->id }}" {{ old('level_id') == $level->id ? 'selected' : '' }}>
                                                        {{ $level->level }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('level_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- दर रकम -->
                                        <div class="col-md-4">
                                            <label for="rate_amount" class="form-label">दर रकम <span class="text-danger">*</span></label>
                                            <input type="number" step="0.01" min="0" class="form-control @error('rate_amount') is-invalid @enderror"
                                                id="rate_amount" name="rate_amount"
                                                value="{{ old('rate_amount') }}"
                                                placeholder="दर रकम प्रविष्ट गर्नुहोस्" required>
                                            @error('rate_amount')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Submit button -->
                                        <div class="col-md-4 d-flex justify-content-start">
                                            <button type="submit" class="btn btn-success">
                                                <i class="bx bx-plus me-1"></i> थप्नुहोस्
                                            </button>
                                        </div>

                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Data Table -->
                <div class="row">
                    <div class="col-12">
                        <h5 class="mb-3">दर सूची</h5>
                        <table class="table align-middle datatable dt-responsive table-check nowrap" style="border-collapse: collapse; border-spacing: 0 8px; width: 100%;">
                            <thead>
                                <tr class="bg-transparent">
                                    <th width="10%">स. नं.</th>
                                    <th width="40%">श्रेणी</th>
                                    <th width="30%">दर रकम</th>
                                    <th width="20%">कार्य</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($rates as $sn => $data)
                                <tr>
                                    <td>{{ ++$sn }}</td>
                                    <td>{{ $data->level->level ?? 'N/A' }}</td>
                                    <td>रु. {{ number_format($data->rate_amount, 2) }}</td>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-link font-size-16 shadow-none py-0 text-muted dropdown-toggle"
                                                    type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                @if (auth()->user()->usertype == 1 || in_array('7', explode(',', auth()->user()->allowed_modules)))
                                                <li>
                                                    <a class="dropdown-item" href="{{ route('rates.edit', $data->id) }}">
                                                        <i class="bx bx-edit me-1"></i> Edit
                                                    </a>
                                                </li>
                                                @endif

                                                @if (auth()->user()->usertype == 1 || in_array('8', explode(',', auth()->user()->allowed_modules)))
                                                <li>
                                                    <form action="{{ route('rates.destroy', $data->id) }}" method="POST" class="d-inline delete-form">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="dropdown-item delete-link" style="border: none; background: none;">
                                                            <i class="bx bx-trash me-1"></i> Delete
                                                        </button>
                                                    </form>
                                                </li>
                                                @endif
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4" class="text-center">कुनै डेटा फेला परेन</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- end table responsive -->
            </div>
            <!-- end card body -->
        </div>
        <!-- end card -->
    </div>
    <!-- end col -->
</div>
<!-- end row -->

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Handle delete confirmation
        var deleteLinks = document.querySelectorAll('.delete-link');

        deleteLinks.forEach(function(link) {
            link.addEventListener('click', function(event) {
                event.preventDefault();

                var confirmDelete = confirm("के तपाईं यो डेटा मेटाउन चाहनुहुन्छ?");

                if (confirmDelete) {
                    this.closest('form').submit();
                }
            });
        });

        // Auto-hide alerts after 5 seconds
        setTimeout(function() {
            var alerts = document.querySelectorAll('.alert');
            alerts.forEach(function(alert) {
                if (alert.classList.contains('show')) {
                    alert.classList.remove('show');
                }
            });
        }, 5000);
    });
</script>
@endsection