@extends('layouts.admin')
@section('breadcrumb', 'admin.schedule')
@section('title', 'Schedule')

@section('content')
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <x-common.create-button route="admin.schedule.create" />

                <table class="table table-bordered" id="datatable">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Time</th>
                            <th>Status</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($schedule as $item)
                            <tr>
                                <td>
                                    {{ $loop->index + 1 }}
                                </td>
                                <td>
                                    {{ date('H:i', strtotime($item->time_start)) }} -
                                    {{ date('H:i', strtotime($item->time_end)) }}
                                </td>
                                <td>
                                    <div class="form-group">
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" name="is_enable"
                                                class="custom-control-input toggle-status"
                                                id="statusToggle{{ $item->id }}" value="1"
                                                {{ $item->is_enable ? 'checked' : '' }} data-id="{{ $item->id }}">
                                            <label class="custom-control-label" for="statusToggle{{ $item->id }}">
                                                @if ($item->is_enable)
                                                    Enabled
                                                @else
                                                    Disabled
                                                @endif
                                            </label>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <a href="{{ route('admin.schedule.edit', ['id' => $item->id]) }}"
                                        class="btn btn-success btn-sm">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="{{ route('admin.schedule.delete', ['id' => $item->id]) }}"
                                        class="btn btn-danger btn-sm delete-btn">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
            });

            $(document).on("change", ".toggle-status", function() {
                const checked = $(this).prop("checked");
                const id = $(this).attr("data-id");

                const dictStatus = [{
                    status: 1,
                    updatedTitle: "Enabled"
                }, {
                    status: 0,
                    updatedTitle: "Disabled"
                }];

                const labelElement = $(this).next();
                const toggleElement = $(this);

                const index = checked ? 0 : 1;

                $.ajax({
                    url: `{{ route('api.schdule.update-status') }}/${id}`,
                    method: "PUT",
                    dataType: "JSON",
                    data: {
                        status: dictStatus[index].status
                    },
                    success: function(res) {
                        Toast.fire({
                            icon: "success",
                            title: "Schedule status was updated successfully"
                        });

                        labelElement.html(dictStatus[index].updatedTitle)
                    },
                    error: function(err) {
                        const {
                            responseJSON
                        } = err;
                        Toast.fire({
                            icon: 'error',
                            title: responseJSON.message
                        });
                        toggleElement.prop('checked', !checked);
                    }
                })
            });
        });
    </script>
@endsection