@extends('layouts.master')

@section('title')
    @lang('translation.Price_Slab')
@endsection

@section('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
@endsection

@section('content')
    <div class="bg-white px-4">
        <div class="table-responsive bg-white">
            <div class="d-flex justify-content-between align-items-center">
                <h4 class="py-3 pt-4">
                    @lang('translation.Price_Slab_List')
                </h4>
                <a href="{{ route('price-slab.create') }}" class="btn btn-outline-info px-4">@lang('translation.Add')</a>
            </div>

            <table class="table table-bordered yajra-datatable">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>@lang('translation.Branch')</th>
                        <th>@lang('translation.Min_Count')</th>
                        <th>@lang('translation.Max_Count')</th>
                        <th>@lang('translation.Discount_Percentage')</th>
                        <th>@lang('translation.status')</th>
                        <th>@lang('translation.Action')</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($data as $key => $d)
                        <tr>
                            <td>{{ (int) $key + 1 }}</td>
                            <td>{{ $d->branch->branch_name ?? 'N/A' }}</td>
                            <td>{{ $d->min_count }}</td>
                            <td>{{ $d->max_count ?? 'Unlimited' }}</td>
                            <td>{{ $d->discount_percentage }}%</td>
                            <td>{{ $d->status == 'active' ? 'Active' : 'Inactive' }}</td>
                            <td class='d-flex'>
                                <a href="{{ route('price-slab.edit', $d->id) }}" class="btn btn-primary text-white">
                                    <i class="far fa-edit"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.yajra-datatable').DataTable();
        });
    </script>
@endsection