@extends('layouts.app-admin')

@section('content')
    <style>
        #datatable {
            border: none;
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        #datatable td {
            font-size: 14px;
            vertical-align: middle;
            border: 1px solid #f1f1f1;
            background-color: #ffffff;
            color: #555;
            transition: all 0.3s ease;
            padding: 12px;
        }

        #datatable th {
            background-color: #f7f8fa;
            font-weight: 600;
            text-transform: uppercase;
            color: #333;
            text-align: left;
            padding: 12px;
            border-bottom: 2px solid #e5e5e5;
        }

        tbody tr {
            transition: all 0.3s ease;
        }

        tbody tr:hover {
            background-color: #f9f9f9;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 6px 12px;
            margin: 0 3px;
            border-radius: 4px;
            background-color: #ffffff;
            color: #555;
            border: 1px solid #ddd;
            transition: all 0.3s;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background-color: #007bff;
            color: #ffffff;
            border-color: #007bff;
        }

        .dataTables_wrapper .dataTables_filter input {
            border-radius: 25px;
            border: 1px solid #ddd;
            padding: 8px 20px;
            box-shadow: none;
            outline: none;
            transition: all 0.3s ease;
            font-size: 14px;
        }

        .dataTables_wrapper .dataTables_filter input:focus {
            border-color: #007bff;
            box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.5);
        }

        .dataTables_wrapper .dataTables_length select {
            border-radius: 25px;
            padding: 5px 10px;
            border: 1px solid #ddd;
        }

        .btn-custom {
            background-color: #007bff;
            color: #ffffff;
            border-radius: 25px;
            padding: 6px 20px;
            font-size: 14px;
            transition: all 0.3s ease;
            border: none;
        }

        .btn-custom:hover {
            background-color: #0056b3;
            color: #ffffff;
        }

        .serial-number-column {
            padding-left: 15px !important;
        }

        #datatable_length .form-select {
            padding-right: 55px;
        }
    </style>
    <div class="container">
        <h2>Bid Fee Management</h2>

        <table class="table table-bordered yajra-datatable" id="datatable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>From Amount</th>
                    <th>To Amount</th>
                    <th>Percentage</th>
                    <th>Is Bid</th>
                    <th>Is Offer</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <div class="modal" id="bidFeeModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="bidFeeForm">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Add/Edit Bid Fee</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="bid_fee_id">
                        <div class="mb-3">
                            <label class="form-label">From Amount</label>
                            <input type="text" class="form-control" id="from_amount" placeholder="From Amount" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">To Amount</label>
                            <input type="text" class="form-control" id="to_amount" placeholder="To Amount">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Percentage</label>
                            <input type="text" class="form-control" id="percentage" placeholder="Percentage" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('extra-scripts')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css" />
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>

    <script>
        $(document).ready(function() {
            var table = $('.yajra-datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.company_fee.list') }}",
                dom: 'Bfrtip',
                buttons: [{
                        text: 'Add New Rule',
                        action: function(e, dt, node, config) {
                            $('#bidFeeModal').modal('show');
                        },
                        className: 'btn btn-primary mb-3'
                    },
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'from_amount',
                        name: 'from_amount'
                    },
                    {
                        data: 'to_amount',
                        name: 'to_amount'
                    },
                    {
                        data: 'percentage',
                        name: 'percentage'
                    },
                    {
                        data: 'bid',
                        name: 'bid',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'offer',
                        name: 'offer',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false,
                    }
                ]
            });

            $(document).on('click', '.edit-btn', function() {
                var id = $(this).data('id');
                $.get('/admin/company_fee/edit/' + id, function(data) {
                    $('#bid_fee_id').val(data.id);
                    $('#from_amount').val(data.from_amount);
                    $('#operator').val(data.operator);
                    $('#to_amount').val(data.to_amount);
                    $('#percentage').val(data.percentage);
                    $('#bidFeeModal').modal('show');
                });
            });

            $('#bidFeeForm').on('submit', function(e) {
                e.preventDefault();
                var formData = {
                    id: $('#bid_fee_id').val(),
                    from_amount: $('#from_amount').val(),
                    operator: $('#operator').val(),
                    to_amount: $('#to_amount').val(),
                    percentage: $('#percentage').val(),
                    _token: $('input[name="_token"]').val()
                };

                var url = formData.id ? '/admin/company_fee/update/' + formData.id :
                    '/admin/company_fee/store';
                var method = 'POST';

                $.ajax({
                    url: url,
                    type: method,
                    data: formData,
                    success: function(response) {
                        $('#bidFeeModal').modal('hide');
                        table.ajax.reload();
                    }
                });
            });

            $(document).on('click', '.delete-btn', function() {
                var id = $(this).data('id');
                if (confirm('Are you sure you want to delete this rule?')) {
                    $.ajax({
                        url: '/admin/company_fee/delete/' + id,
                        type: 'DELETE',
                        data: {
                            _token: $('input[name="_token"]').val()
                        },
                        success: function(response) {
                            table.ajax.reload();
                        }
                    });
                }
            });

            $(document).on('change', '.is-bid-toggle, .is-offer-toggle', function() {
                let id = $(this).data('id');
                let field = $(this).hasClass('is-bid-toggle') ? 'bid' : 'offer';
                let value = $(this).is(':checked') ? 1 : 0;

                let data = {
                    id: id,
                    _token: $('input[name="_token"]').val() 
                };

                data[field] = value; 

                $.ajax({
                    url: '/admin/company_fee/update/' + id,
                    type: 'POST',
                    data: data,
                    success: function(response) {
                        table.ajax.reload(); 
                    },
                    error: function(xhr) {
                        console.error('Error updating:', xhr);
                    }
                });
            });

            $('#bidFeeModal').on('hidden.bs.modal', function() {
                $('#bidFeeForm')[0].reset()
                $('#bid_fee_id').val('');
            });
        });
    </script>
@endsection