@extends('template.app')

@section('meta')
@endsection

@section('title')
Offers & Discounts
@endsection

@section('styles')
    <style>
         .highlight {
            background-color: #ffff99; /* Change to desired highlight color */
        }
        #data-table.dataTable tbody td {
            padding: 0px !important;
            height: 20px !important;
            line-height: 35px !important;
            font-size: 15px !important;
            text-align: center;
        }
        #data-table th {
            text-align: center;
        }
        .form-group .custom_color {
            background-color: lightgrey !important;
        }
        table.dataTable {
            width: 100% !important;
            min-width: 2000px; 
        }
        
        div.dataTables_wrapper {
            width: 100%;
            margin: 0 auto;
            overflow-x: auto;
        }
    </style>
@endsection

@section('content')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
    
    <div class="page-breadcrumb">
        <div class="row">
            <div class="col-7 align-self-center">
                <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Discounts</h4>
                <div class="d-flex align-items-center">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb m-0 p-0">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('discount') }}" class="text-muted">Discounts</a></li>
                            <li class="breadcrumb-item text-muted active" aria-current="page">List</li>
                        </ol>
                    </nav>
                </div>
            </div>
            
            <div class="col-5 align-self-center">
                <div class="customize-input float-right">
                    <a class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" href="{{url('/example-xlsx/example-discount_master.xlsx')}}" download>Example Excel</a>
                    <a class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" data-toggle="modal" data-target="#exampleModal" href="Javascript:void(0)">Import</a>
                    <button class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Export</button>
                    <a class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" href="{{ route('discount.create') }}">Add New</a>
                </div>
            </div> 
            
            <div class="col-sm-8"></div>
            
            <div class="col-sm-4">
                <div class="col-md-12 align-self-center collapse" id="collapseExample">
                     <div class="customize-input float-right">
                        <form action="{{ route('discount.export') }}" method="get">
                            <div class="row">
                                <div class="form-group col-md-6 ">
                                    <select name="slug" class="form-control" required>
                                        <option value="">Select Status</option>
                                        <option value="all">All</option>
                                        <option value="active">Active</option>
                                        <option value="inactive">Inactive</option>
                                        <option value="deleted">Deleted</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <button class="btn btn-primary" type="submit">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div> 
                </div>
            </div>
        </div>
    </div>
    
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body table-responsive" style="min-width:100% !important;">
                        <table class="table table-bordered data-table" id="data-table">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Title</th>
                                    <th>Start Date</th>
                                    <th>End Date</th> 
                                    <th>Discount Year</th>
                                    <th>Branch</th>
                                    <th>Car Model</th>
                                    <th>Fuel Type</th>
                                    <th>GM Discount</th>
                                    <th>BH Discount</th>
                                    <th>CEO Discount</th>
                                    <th>MD Discount</th>
                                    <th>Remarks</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                                <tr class="filterrow">
                                    <th></th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="title" value="{{ request()->get('title', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="1">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="start_date" value="{{ request()->get('start_date', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="2">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="end_date" value="{{ request()->get('end_date', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="3">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="discount_year" value="{{ request()->get('discount_year', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="4">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="branch" value="{{ request()->get('branch', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="5">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="car_model" value="{{ request()->get('car_model', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="6">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="fuel_type" value="{{ request()->get('fuel_type', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="7">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="gm_discount" value="{{ request()->get('gm_discount', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="8">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="bh_discount" value="{{ request()->get('bh_discount', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="9">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="ceo_discount" value="{{ request()->get('ceo_discount', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="10">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="md_discount" value="{{ request()->get('md_discount', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="11">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="description" value="{{ request()->get('description', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="12">
                                            </div>
                                        </div>
                                    </th>
                                    <th><div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="status" value="{{ request()->get('status', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="13">
                                            </div>
                                        </div></th>
                                    <th></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Import</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    
                </div>
                <form action="{{ route('offer.import') }}" name="form" id="form" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="form-group col-sm-12">
                                <label for="first_name">Upload File Here</label>
                                <input type="file" name="file" id="file" class="form-control" placeholder="Plese upload file here" required>
                                <span class="kt-form__help error file"></span>
                            </div>
                        </div>
                    </div>            
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-default">Submit!</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

    <script type="text/javascript">
    
        $(document).ready(function () {
            (function (window, $) {
                window.LaravelDataTables = window.LaravelDataTables || {};
                window.LaravelDataTables["dataTableBuilder"] = $("#data-table").DataTable({
                    processing: true,
                    serverSide: true,
                    scrollX: true,
                    language: {
                        info: "_START_ - _END_ of _TOTAL_",
                        lengthMenu: "_MENU_ ",
                        infoFiltered: ""
                    },
                    scrollY: '700px',
                    scrollCollapse: true,
                    paging: true,
                    searching: false,
                    bSortCellsTop: true,
                    ajax: {
                        url: '{!! route("discount") !!}',
                        data: function (d) {
                            d.title = $(".datatable-form-filter input[name='title']").val();
                            d.start_date = $(".datatable-form-filter input[name='start_date']").val();
                            d.end_date = $(".datatable-form-filter input[name='end_date']").val();
                            d.discount_year = $(".datatable-form-filter input[name='discount_year']").val();
                            d.branch = $(".datatable-form-filter input[name='branch']").val();
                            d.car_model = $(".datatable-form-filter input[name='car_model']").val();
                            d.fuel_type = $(".datatable-form-filter input[name='fuel_type']").val();
                            d.gm_discount = $(".datatable-form-filter input[name='gm_discount']").val();
                            d.bh_discount = $(".datatable-form-filter input[name='bh_discount']").val();
                            d.ceo_discount = $(".datatable-form-filter input[name='ceo_discount']").val();
                            d.md_discount = $(".datatable-form-filter input[name='md_discount']").val();
                            d.description = $(".datatable-form-filter input[name='description']").val();
                            d.status = $(".datatable-form-filter input[name='status']").val();
                        },
                        error: function (d) {
                            console.log('Error fetching data', d);
                        }
                    },
                    columns: [
                        { data: 'DT_RowIndex', name: 'DT_RowIndex', class: 'text-center DT_RowIndex', title: 'No.', orderable: false, width: 100 },
                        { data: 'title', name: 'title', class: 'text-center title', title: 'Title', orderable: false },
                        { data: 'start_date', name: 'start_date', class: 'text-center start_date', title: 'Start Date', orderable: false },
                        { data: 'end_date', name: 'end_date', class: 'text-center end_date', title: 'End Date', orderable: false },
                        { data: 'discount_year', name: 'discount_year', class: 'text-center discount_year', title: 'Discount Year', orderable: false },
                        { data: 'branch', name: 'branch', class: 'text-center branch', title: 'Branch', orderable: false },
                        { data: 'car_model', name: 'car_model', class: 'text-center car_model', title: 'Car Model', orderable: false },
                        { data: 'fuel_type', name: 'fuel_type', class: 'text-center fuel_type', title: 'Fuel Type', orderable: false },
                        { data: 'gm_discount', name: 'gm_discount', class: 'text-center gm_discount', title: 'GM Discount', orderable: false },
                        { data: 'bh_discount', name: 'bh_discount', class: 'text-center bh_discount', title: 'BH Discount', orderable: false },
                        { data: 'ceo_discount', name: 'ceo_discount', class: 'text-center ceo_discount', title: 'CEO Discount', orderable: false },
                        { data: 'md_discount', name: 'md_discount', class: 'text-center md_discount', title: 'MD Discount', orderable: false },
                        { data: 'description', name: 'description', class: 'text-center description', title: 'Remarks', orderable: false },
                        { data: 'status', name: 'status', class: 'text-center status', title: 'Status', orderable: false },
                        { data: 'action', name: 'action', title: 'Action', orderable: false, searchable: false, width: 50, class: 'text-center action_column' }
                    ],
                    lengthMenu: [
                        [25, 50, 100, -1],
                        ['25', '50', '100', 'Show all']
                    ],
                    order: [],
                    responsive: true,
                    colReorder: {
                        enable: false,
                    },
                    dom: '<"top"f>rt<"bottom"ipl><"clear">',
                    fnInitComplete: function (settings, json) {
                        $('table.table input:checkbox').map(function () {
                            if (!$(this).prop("checked")) {
                                var column = LaravelDataTables["dataTableBuilder"].column($(this).attr('data-column'));
                                column.visible(false);
                            }
                        });
                    },
                    pageLength: 25,
                });
            })(window, jQuery);
        });  
        
        jQuery('.datatable-form-filter input').on('keyup', function (e) {
            if(jQuery(this).val().length >= 3 || e.keyCode == 13 || !jQuery(this).val()) {
                window.LaravelDataTables["dataTableBuilder"].draw();
                e.preventDefault();
            }
        });

        jQuery('.datatable-form-filter select').on('change', function (e) {
            window.LaravelDataTables["dataTableBuilder"].draw();
            e.preventDefault();
        });

        jQuery('input:checkbox[name="name_sort_asc"],input:checkbox[name="name_sort_desc"]').on('click', function (e) {
            window.LaravelDataTables["dataTableBuilder"].draw();
            e.preventDefault();
        });
        
        window.change_status = function(object) {
            var id = $(object).data("id");
            var status = $(object).data("status");
    
            if (confirm('Are you sure?')) {
                $.ajax({
                    "url": "{!! route('discount.change.status') !!}",
                    "dataType": "json",
                    "type": "POST",
                    "data": {
                        id: id,
                        status: status,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.code == 200) {
                            window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                            toastr.success('Status changed successfully', 'Success');
                        } else {
                            toastr.error('Failed to change status', 'Error');
                        }
                    }
                });
            }
        }
    </script>
@endsection