@extends('dashboard.master')
@section('title', 'Hostel Fees')
@push('css')
    <link rel="stylesheet" href="{{ asset('backend/DataTables/datatables.min.css') }}">
    <link rel="stylesheet" href="{{ asset('backend/css/toggle.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css"
        integrity="sha512-O03ntXoVqaGUTAeAmvQ2YSzkCvclZEcPQu1eqloPaHfJ5RuNGiS4l+3duaidD801P50J28EHyonCV06CUlTSag=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.0/css/toastr.css" rel="stylesheet" />
@endpush

@section('content')

    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="page-title-wrapper">
                    <div class="page-title-heading">
                        <div class="page-title-icon">
                            <i class="nav-icon fas fa-mosque"></i>
                        </div>
                        <span>
                            <b>শিক্ষার্থী ফি</b>
                        </span>
                    </div>

                    <div class="page-title-actions">
                        <a title="Back" href="{{ url()->previous() }}" type="button" class="btn btn-sm btn-dark">
                            <i class="fas fa-arrow-left mr-1"></i>
                            Back
                        </a>
                        <a title="Create" href="#" type="button" class="btn btn-sm btn-primary" data-toggle="modal"
                            data-target="#addClass">
                            <i class="fas fa-plus mr-1"></i>
                            Create
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-body">
                        <table id="data_table" class="table table-bordered table-striped data-table table-hover">
                            <thead>
                                <tr>
                                    <th>SN</th>
                                    <th>Type</th>
                                    <th>Details</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>

    {{-- add modal --}}
    <div class="modal fade" id="addClass" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="demoModalLabel">{{ __('Create Fees') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form class="forms-sample add-class" enctype="multipart/form-data" action="#" method="POST">
                        @csrf
                        <div class="form-group row">

                            <div class="col-sm-12">
                                <label for="name" class="col-sm-2 col-form-label">Name<span
                                        class="text-red">*</span></label>
                                <input type="text" name="name" id="name" value="{{ old('name') }}"
                                    class="form-control @error('name') is-invalid @enderror" placeholder="Enter fee name"
                                    required>

                               

                                @error('name')
                                    <span class="text-danger" role="alert">
                                        <p>{{ $message }}</p>
                                    </span>
                                @enderror

                            </div>




                            <div class="col-sm-12">
                                <label for="amount" class="col-sm-2 col-form-label">Amount<span
                                        class="text-red">*</span></label>
                                <input type="number" name="amount" id="amount" value="{{ old('amount') }}"
                                    class="form-control @error('amount') is-invalid @enderror" required>
                                @error('amount')
                                    <span class="text-danger" role="alert">
                                        <p>{{ $message }}</p>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-sm-12">
                                <label for="type" class="col-sm-2 col-form-label">Type<span
                                        class="text-red">*</span></label>
                                <select name="type" id="type" class="form-control" required>
                                    <option value="">Select Type</option>
                                    <option value="1">একাডেমিক - (নির্ধারিত ক্লাসের সকল শিক্ষার্থীদের জন্য)</option>
                                    <option value="2">আবাসিক - (নির্ধারিত ক্লাসের সকল আবাসিক শিক্ষার্থীদের জন্য)</option>
                                    <option value="3">পরীক্ষা - (নির্ধারিত ক্লাসের সকল শিক্ষার্থীদের জন্য)</option>
                                    <option value="4">অনাবাসিক - (নির্ধারিত ক্লাসের সকল অনাবাসিক শিক্ষার্থীদের জন্য)</option>

                                </select>

                            </div>

                            <div class="col-sm-12">
                                <label for="type" class="col-sm-2 col-form-label">Fund(optional)</label>
                                <select name="fund" id="fund" class="form-control">
                                    <option value="">Select Fund</option>
                                    @foreach ($funds as $fund)
                                        <option value="{{ $fund->id }}">{{ $fund->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">{{ __('Close') }}</button>
                    <button type="button" id="save" class="btn btn-primary">{{ __('Create') }}</button>
                </div>
            </div>
        </div>
    </div>

    {{-- edit modal --}}
    <div class="modal fade" id="editClass" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="demoModalLabel">{{ __('Edit Fees') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form id="edit-menu" action="#">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="" id="editId">
                        <div class="form-group row">


                            <div class="col-sm-12">
                                <label for="name" class="col-sm-2 col-form-label">Name<span
                                        class="text-red">*</span></label>
                                <input type="text" name="name" id="nameEdit" value="{{ old('name') }}"
                                    class="form-control @error('name') is-invalid @enderror"
                                    placeholder="Enter subject name" required>

                                {{-- <input type="hidden" value="2" id="typeEdit"> --}}

                                @error('name')
                                    <span class="text-danger" role="alert">
                                        <p>{{ $message }}</p>
                                    </span>
                                @enderror

                            </div>




                            <div class="col-sm-12">
                                <label for="amount" class="col-sm-2 col-form-label">Amount<span
                                        class="text-red">*</span></label>
                                <input type="number" name="amount" id="amountEdit" value="{{ old('amount') }}"
                                    class="form-control @error('amount') is-invalid @enderror" required>
                                @error('amount')
                                    <span class="text-danger" role="alert">
                                        <p>{{ $message }}</p>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-sm-12">
                                <label for="type" class="col-sm-2 col-form-label">Type<span
                                        class="text-red">*</span></label>
                                <select name="type" id="typeEdit" class="form-control">
                                    <option value="">Select Type</option>
                                    <option value="1">একাডেমিক - (নির্ধারিত ক্লাসের সকল শিক্ষার্থীদের জন্য)</option>
                                    <option value="2">আবাসিক - (নির্ধারিত ক্লাসের সকল আবাসিক শিক্ষার্থীদের জন্য)</option>
                                    <option value="3">পরীক্ষা - (নির্ধারিত ক্লাসের সকল শিক্ষার্থীদের জন্য)</option>
                                    <option value="4">অনাবাসিক - (নির্ধারিত ক্লাসের সকল অনাবাসিক শিক্ষার্থীদের জন্য)</option>

                                </select>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">{{ __('Close') }}</button>
                    <button type="button" id="update" class="btn btn-primary">{{ __('Update') }}</button>
                </div>
            </div>
        </div>
    </div>
    @push('js')
        <script src="{{ asset('backend/DataTables/datatables.min.js') }}"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"
            integrity="sha512-Zq9o+E00xhhR/7vJ49mxFNJ0KQw1E1TMWkPTxrWcnpfEFDEXgUiwJHIKit93EW/XxE31HSI5GEOW06G6BF1AtA=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.0/js/toastr.js"></script>
        <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
        <script>
            // add menu
            $(document).ready(function($) {
                $('#save').on('click', function(event) {
                    event.preventDefault();
                    var url = "{{ route('hostel.fees.store') }}";
                    var name = $('#name').val();
                    var amount = $('#amount').val();
                    var type = $('#type').val();
                    var fund = $('#fund').val();
                    $.ajax({
                        url: url,
                        type: "get",
                        data: {
                            name: name,
                            amount: amount,
                            type: type,
                            fund: fund,
                        },
                        success: function(data) {
                            if (data.success === true) {
                                location.reload();
                                toastr.success(data.message);
                                $('#add-class').trigger('clear');
                                $('#add-class')[0].reset();
                            } else {
                                toastr.error(data.message);
                                $('#add-class').trigger('clear');
                                $('#add-class')[0].reset();
                                $('#addClass').modal('show');
                            }
                        },

                    });
                    $.noConflict();
                    $('#addClass').modal('hide');
                });
            });

            //edit menu
            $('#data_table').on('click', '#edit[href]', function(e) {
                e.preventDefault();
                var url = $(this).attr('href');

                $.ajax({
                    type: "GET",
                    url: url,
                    success: function(resp) {
                        $('#nameEdit').val(resp.name);
                        $('#amountEdit').val(resp.amount);
                        $('#typeEdit').val(resp.type);
                        $('#editId').val(resp.id);
                    }
                });
            });

            $('#update').on('click', function(event) {
                event.preventDefault();
                var id = $('#editId').val();
                var name = $('#nameEdit').val();
                var amount = $('#amountEdit').val();
                var type = $('#typeEdit').val();

                var url = '{{ route('hostel.fees.update', ':id') }}';

                $.ajax({
                    url: url.replace(':id', id),
                    'type': 'GET',
                    'data': {
                        name: name,
                        amount: amount,
                        type: type,
                    },
                    success: function(data) {
                        if (data.success === true) {
                            toastr.success(data.message);
                            $('#data_table').DataTable().ajax.reload();
                            $('#editClass').modal('hide');
                        } else {
                            toastr.error(data.message);
                            $('#editClass').modal('show');
                        }
                    }
                });

            });

            $(document).ready(function() {
                var dTable = $('#data_table').DataTable({
                    order: [],
                    lengthMenu: [
                        [10, 25, 50, 100, -1],
                        [10, 25, 50, 100, "All"]
                    ],
                    processing: true,
                    responsive: false,
                    serverSide: true,
                       scrollX: true,
                    autoWidth: false,
                    scroller: {
                        loadingIndicator: false
                    },
                    language: {
                        processing: '<i class="ace-icon fa fa-spinner fa-spin orange bigger-500" style="font-size:60px;text-align:center;"></i>'
                    },
                    pagingType: "full_numbers",
                    ajax: {
                        url: "{{ route('hostel.fees') }}",
                        type: "get"
                    },

                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex',
                            searchable: true,
                            orderable: true
                        },
                        {
                            data: 'type',
                            name: 'type'
                        },
                        {
                            data: 'details',
                            name: 'details',
                            searchable: true,
                            orderable: true
                        },
                        {
                            data: 'action',
                            searchable: false,
                            orderable: false
                        }
                    ],
                    dom: "<'row'<'col-sm-2'l><'col-sm-7 text-center'B><'col-sm-3'f>>tipr",
                    buttons: [{
                            extend: 'copy',
                            className: 'btn-sm btn-info',
                            title: 'Hostel Fees List',
                            header: true,
                            footer: true,
                        },

                        {
                            extend: 'excel',
                            className: 'btn-sm btn-success',
                            title: 'Student Fee',
                            header: true,
                            footer: true,
                            exportOptions: {
                                columns: [0, 1, 2],
                                stripHtml: true
                            },

                        },

                        {
                            extend: 'print',
                            className: 'btn-sm btn-danger',
                            title: 'Hostel Fees List',
                            pageSize: 'A2',
                            header: true,
                            footer: true,
                            orientation: 'landscape',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
                        {
                            extend: 'colvis',
                            className: 'btn-sm btn-warning',
                            text: 'Column Visibility',
                            title: 'Column Visibility',
                            columns: ':not(:first-child)'
                        }
                    ],
                });
            });

            $('#data_table').on('click', '.btn-delete[data-remote]', function(e) {
                e.preventDefault();

                $.ajaxSetup({
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    }
                });

                const url = $(this).data('remote');
                swal({
                    title: `Are you sure?`,
                    text: "This will permanently delete the hostel fee and all related datas. This action can not be undone",
                    buttons: true,
                    dangerMode: true,
                }).then((willDelete) => {
                    if (willDelete) {
                        $.ajax({
                            url: url,
                            type: 'get',
                            dataType: 'json',
                            data: {
                                submit: true,
                                _method: 'delete',
                                _token: "{{ csrf_token() }}"
                            }
                        }).always(function(data) {
                            $('#data_table').DataTable().ajax.reload();
                            if (data.success === true) {
                                toastr.success(data.message, {
                                    positionClass: 'toast-bottom-full-width',
                                });
                            } else {
                                toastr.error(data.message, {
                                    positionClass: 'toast-bottom-full-width',
                                });
                            }
                        });
                    }
                });
            });

            @if (Session::has('success'))
                toastr.options = {
                    "closeButton": true,
                    "progressBar": true,
                    "timeOut": 2000
                };

                toastr.success("{{ session('success') }}");
            @endif

            @if (Session::has('error'))
                toastr.options = {
                    "closeButton": true,
                    "progressBar": true
                };
                toastr.error("{{ session('error') }}");
            @endif
        </script>
    @endpush
@endsection