@extends('admin.layouts.master')

@push('css')
<style>
    .menu-image {
        max-width: 100px;
        height: auto;
        object-fit: cover;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

    <h4>Operation Hours</h4>

    <div class="card">
        <h5 class="card-header row">
            <form class="row" action="">
                <div class="col-md-6 mb-3">
                    <input class="form-control form-control-sm" name="search" type="text" placeholder="Search title..."
                        value="{{ request()->get('search') }}">
                </div>
                <div class="col-md-3 mb-3 d-flex align-items-end">
                    <button type="submit" class="btn btn-secondary waves-effect waves-light w-100 me-2">Search</button>
                </div>
                <div class="col-md-3 mb-3 d-flex align-items-end">
                    <a class="btn btn-light waves-effect waves-light w-100 me-2 update-all">Update All</a>
                </div>
            </form>
        </h5>
        <div class="table-responsive text-nowrap">
            <table class="table table-striped table-responsive table-hover">
                <thead>
                    <tr>
                        <th>SN</th>
                        <th>Title</th>
                        <th>Value</th>
                        <th>Primary</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @if(count($operationHours) > 0)
                    @foreach($operationHours as $key => $hour)
                    <form action="{{ route('admin.operation-hours.store') }}" method="POST" id="update-all-form">
                        @csrf
                        <tr>
                            <input type="hidden" name="id[]" value="{{ $hour->id }}">

                            <td>{{ $key + 1 }}</td>
                            <td><input type="text" name="title[]" value="{{ $hour->title }}"> </td>
                            <td><input type="text" name="value[]" value="{{ $hour->value }}"> </td>
                            <td>
                                @if($hour->is_primary)
                                <span class="badge rounded-pill bg-label-success me-1">Primary</span>
                                @else
                                <span class="badge rounded-pill bg-label-warning me-1">Secondary</span>
                                @endif
                            </td>
                            <td>
                                <input type="checkbox" name="status[{{ $hour->id }}]" {{ $hour->status ?
                                'checked' : '' }}>
                            </td>
                        </tr>
                        @endforeach
                        @else
                        <tr>
                            <td colspan="10" class="text-center pt-5">
                                <h5>😢 No opening hours found @if (count(request()->all()) > 0) <a
                                        href="{{ route('admin.operation-hours.index') }}">Reset Filter</a> @endif
                                </h5>
                            </td>
                        </tr>
                    </form>
                    @endif
                </tbody>
            </table>
        </div>
    </div>

    <div class="modal" id="imageModal" tabindex="-1" aria-modal="true" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-body row">
                    <div class="col-12 mb-6 mt-2 text-center">
                        <img id="modalImage" src="" alt="Menu" class="img-fluid" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary waves-effect"
                        data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@push('js')
<script>
    $(document).ready(function () {
        $('body').on('click', '.update-all', function () {
            $('#update-all-form').submit();
        });
    });
</script>
@endpush