@extends('admin.master')
@section('content')
    @push('stylesheets')
        <link href="{{ asset('admin/assets/lib/datatables/jquery.dataTables.min.css') }}" rel="stylesheet" type="text/css">
        <link href="{{ asset('admin/assets/lib/datatables/responsive.bootstrap.min.css') }}" rel="stylesheet" type="text/css">
        <style>
            .switch {
                position: relative;
                display: inline-block;
                width: 38px;
                height: 20px;
            }
            .switch input {
                opacity: 0;
                width: 0;
                height: 0;
            }
            .slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #ccc;
                transition: .3s;
            }
            .slider:before {
                position: absolute;
                content: "";
                height: 14px;
                width: 14px;
                left: 3px;
                bottom: 3px;
                background-color: white;
                transition: .3s;
            }
            input:checked + .slider {
                background-color: #22c55e;
            }
            input:checked + .slider:before {
                transform: translateX(18px);
            }
            .slider.round {
                border-radius: 20px;
            }
            .slider.round:before {
                border-radius: 50%;
            }
        </style>
    @endpush
    <section class="main-content">
        <div class="row">
            <div class="col-md-12">
                @include('admin.flash-message')
                <div class="card">
                    <div class="card-header card-default">
                        <div class="row">
                            <div class="col-md-6">
                               Services
                            </div>
                            <div class="col-md-6">
                                <a class="btn btn-info pull-right" href="{{ route('services.create') }}">Add Service</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <table id="_ajax_datatable" class="table">
                            <thead>
                                <tr>
                                    <th>Image</th>
                                    <th>Title</th>
                                    <th>Description</th>
                                    <th>Original Price</th>
                                    <th>Discount %</th>
                                    <th>Discount Amount</th>
                                    <th>Selling Price</th>
                                    <th>Physician Fee</th>
                                    <th>Status</th>
                                    <th>Created Date</th>
                                    <th>Action</th>
                                </tr>
                                <tr class="table-primary">
                                    <td colspan="11">
                                        <div class="row">
                                            <div class="col-md-3">

                                            </div>
                                            <div class="col-md-2">
                                            </div>
                                            <div class="col-md-2">
                                            </div>
                                            <div class="col-md-2">

                                            </div>
                                            <div class="col-md-3 pull-right">
                                                <form id="search_form" method="GET">
                                                    <div class="input-group">
                                                        <input type="text" name="keyword" class="form-control" placeholder="Search">
                                                        <span class="input-group-btn">
                                                        <button type="submit" class="btn btn-default">
                                                            <i class="fa fa-search" aria-hidden="true"></i>
                                                        </button>
                                                    </span>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @include('admin.footer')
    </section>
    @push('scripts')
        <script>
            let ajax_listing_url  = `{{ route('services.ajax-listing') }}`;
            let service_status_update_url = `{{ route('services.update-status', ['service' => '__SLUG__']) }}`;
        </script>
        <script src="{{ asset('admin/assets/lib/datatables/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('admin/assets/lib/datatables/dataTables.responsive.min.js') }}"></script>
        <script src="{{ asset('admin/assets/js/datatable-ajax.js') }}"></script>
        <script>
            $(document).on('change', '.service-status-toggle', function () {
                const slug = $(this).data('slug');
                const requestUrl = service_status_update_url.replace('__SLUG__', slug);

                ajaxRequest(requestUrl, 'PATCH', {})
                    .then(function (res) {
                        $.toast({
                            heading: 'Success',
                            text: res.message,
                            icon: 'success',
                            position: 'top-right',
                        });
                        $('#search_form').trigger('submit');
                    })
                    .catch(function () {
                        $.toast({
                            heading: 'Error',
                            text: 'Unable to update status',
                            icon: 'error',
                            position: 'top-right',
                        });
                        $('#search_form').trigger('submit');
                    });
            });
        </script>
    @endpush
@endsection