<div class="container my-2">
    <div class="row">
        @foreach($vendor_timings as $item)
         <div class="col-sm-6 my-2">
            <div class="card bg-light p-2 rounded">
                <div class="row">
                    <div class="col-6">
                        <span class='time_1' style="font-size: 15px">

                            <span class="from_time_{{$item->id}}">{{date('H:i a',strtotime($item->from_time))}} </span>-<span class="to_time_{{$item->id}}"> {{date('H:i a',strtotime($item->to_time))}}</span>
                        </span>
                        @if ($item->status == 1)
                        <br> <span class='text-success'>Active</span>

                        @else
                        <br> <span class='text-danger'>In-Active</span>

                        @endif
                    </div>
                    <!--end div-6-->
                    <div class="col-6 text-end align-self-center"> <span>
                            <a class='text-decoration-none px-1 edit-vendor-time' href="#"   data-id="{{$item->id}}">
                                <span class="edit_icon ">
                                        <i class="bi bi-pen"></i>
                                    </span>
                                    <span class='px-1 e-text'>Edit</span>
                            </a>
                        </span>
                        <span>
                            <a class='text-decoration-none px-1  delete-vendor-time' href="#" data-id="{{$item->id}}" >
                                <span class="delete_icon fw-bold" ><i class="bi bi-backspace"></i></span>
                                    <span class='px-1 tcancel e-text'>Delete</span>
                            </a>
                        </span>
                    </div>
                </div>
            </div>
            <!--the card complete-->
    </div>
    <!--the colum-6 here complete-->
    @endforeach
</div>
</div>
<!-- Modal -->
<!-- Modal START HERE ---------------->
<div class="modal fade" id="timingModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form method="post" id='edit-timing-form'>
            @csrf
            <div class="modal-content" style="background-color:transparent">
            <div class="p-2  bg-white rounded">
                <div class='cross'>
                    <button type="button" class="border-0  cancel_icon" data-bs-dismiss="modal" style="background-color: ">
                        <i class="bi bi-x"></i>
                    </button>
                </div>
                <div class='m-lg-3'>
                    <div class="row p-lg-1">
                        <div class="col-md-12">
                            <label for="appt" class="form-label label">From</label>
                            <div class='bg-light round p-2 ron-de '>
                                <input type="time" class="form-control" id="from_time" name="from_time" min="09:00" max="18:00" required>
                            </div> <br>
                        </div>
                        <div class="col-md-12">
                            <label for="appt2" class="form-label label">To</label>
                            <div class='bg-light round p-2 ron-de'>
                                <input type="time" class="form-control" id="to_time" name="to_time" min="09:00" max="18:00" required>
                            </div> <br>
                        </div>
                    </div>
                    <div class='text-center'>
                        <span class='px-3 text-secondary'>Status</span></td>
                        <div class='my-2'>
                            <label class="switch">
                                <input type="checkbox" name="status" id="timing_status">
                                <div class="slider round">
                                    <!--ADDED HTML -->
                                    <span class="on">ON</span>
                                    <span class="off">OFF</span>
                                </div>
                        </div>
                        <br>
                        <button type="submit" class="btn btn-warning col-bt rounded-pill">Update</button>
                    </div>
                </div>
            </div>
        </div>
        </form>
    </div>
</div>

