@extends('template.app')

@section('meta')
@endsection

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

@section('styles')
    <style>
         .highlight {
            background-color: #ffff99; 
        }
        #data-table.dataTable tbody td {
            padding: 0px !important;
            height: 20px !important;
            line-height: 35px !important;
            font-size: 15px !important;
            text-align: center;
        }
        .form-group .custom_color {
            background-color: lightgrey !important;
        }
    </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">
    <style>
        #data-table td {
            white-space: nowrap;
            padding: 0.5rem !important;
            font-size: 15px;
        }
    
        .select2-container .select2-selection--single
        {
         
          height: 30px;
        }
        .mt-2
        {
            font-size: 15px;
            margin-left: 15px;
        }
        
        .custom-form-spacing {
          margin-bottom: -19px;
        }
        
        
        .width_150 {
            width: 150px;
        }
        .width_200 {
            width: 200px;
        }
        .width_250 {
            width: 250px;
        }
        .width_300 {
            width: 300px;
        }
        .table {
            min-height: 800px;
        }
    </style>
    
    <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">Offers & 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('offer') }}" class="text-muted">Offers & 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-offer-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('offer.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('offer.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>
                                    </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" id="datatable" style="text-align: center;">
                        <table class="table table-bordered data-table tables" id="data-table" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Title</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Offer Type</th>  
                                    <th>Amount</th>  
                                    <th>KIA Share / Company Contribution</th>
                                    <th>Branch</th>
                                    <th>Car Model</th>
                                    <th>Fuel Type</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 width_300">
                                            <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 width_200">
                                            <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 width_200">
                                            <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 width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="offer_type" value="{{ request()->get('offer_type', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="4">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="amount" value="{{ request()->get('amount', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="5">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="company_contribution" value="{{ request()->get('company_contribution', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="6">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_300">
                                            <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="7">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <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="8">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <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="9">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_300">
                                            <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="10">
                                            </div>
                                        </div>
                                    </th>
                                    <th><div class="search-box-container datatable-form-filter width_200">
                                            <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="11">
                                            </div>
                                        </div></th>
                                    <th></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Modal -->
    <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>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- Modal -->
@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <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://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 src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    
    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    
    <script type="text/javascript">
        window.change_status = function(object) {
            var id = $(object).data("id");
            var status = $(object).data("status");

            if (confirm('Are you sure?')) {
                $.ajax({
                    "url": "{!! route('offer.change.status') !!}",
                    "dataType": "json",
                    "type": "POST",
                    "data": {
                        id: id,
                        status: status,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.code == 200) {
                            datatable.ajax.reload();
                            toastr.success('Status changed successfully', 'Success');
                            location.reload();
                        } else {
                            toastr.error('Failed to change status', 'Error');
                        }
                    }
                });
            }
        }
    </script>
    
    <script type="text/javascript">
    
        $(document).ready(function () {
            (function (window, $) {
                window.LaravelDataTables = window.LaravelDataTables || {};
                window.LaravelDataTables["dataTableBuilder"] = $("#data-table").DataTable({
                    processing: true,
                    serverSide: true,
                    language: {
                        "info": "_START_ - _END_ of _TOTAL_",
                        "lengthMenu": "_MENU_ ",
                        "infoFiltered": ""
                    },
                    scrollCollapse: true,
                    paging: true,
                    searching: false,
                    bSortCellsTop : true,
                    ajax: {
                        url: '{!! route("offer") !!}',
                        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.offer_type = $(".datatable-form-filter input[name='offer_type']").val();
                            d.amount = $(".datatable-form-filter input[name='amount']").val();
                            d.company_contribution = $(".datatable-form-filter input[name='company_contribution']").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.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: 'offer_type', name: 'offer_type', class: 'text-center offer_type', title: 'Offer Type', orderable: false },
                        { data: 'amount', name: 'amount', class: 'text-center amount', title: 'Amount', orderable: false },
                        { data: 'company_contribution', name: 'company_contribution', class: 'text-center company_contribution', title: 'KIA Share / Company Contribution', 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: 'description', name: 'description', class: 'text-center description', title: 'Remarks',orderable: false, default: true,
                            render: function(data, type, row) {
                                if (!data) return '';
                                let shortText = data.length > 7 ? data.substr(0, 7) + '...' : data;
                                return '<span title="' + $('<div>').text(data).html() + '">' + shortText + '</span>';
                            }
                        },
                        { 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: [ [0,'DESC'] ],
                    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();
        });
    </script>
@endsection