@extends('admin.layouts.app')
@section('title',get_setting('site_name').' Event')

@section('content')

    <div class="row mt-3 mb-3">
        <div class="col-md-12 col-lg-12 col-xl-10 mx-auto">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col">
                            <h5>Event</h5>
                        </div>
                        <div class="col text-right">
                            @can('Event-create')
                                <a id="addevent" class="btn btn-primary" href="javascript:void(0)">Add New</a>
                            @endcan
                        </div>
                    </div>

                </div>
                <div class="card-body">
                    <form action="" method="get">

                        <div class="row">
                            <div class="col">
                                <table class="float-right text-right mb-3">
                                    <tr>
                                        <td>
                                            <select name="year" id="" class="form-control">
                                                <option value="">Please Select Year</option>
                                                @for($i=2023;$i<=date('Y');$i++)
                                                    <option value="{{$i}}">{{$i}}</option>
                                                @endfor
                                            </select></td>

                                        <td>
                                            <select name="month" id="" class="form-control">
                                                <option value="">Please Select Month</option>
                                                @for($i=1;$i<=12;$i++)
                                                    <option
                                                            value="{{$i}}">{{date("F", mktime(0, 0, 0, $i, 1))}}</option>
                                                @endfor
                                            </select></td>

                                        <td>
                                            <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i>&nbsp;{{__('Filter')}}
                                            </button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                    </form>
                    <table class="table aiz-table">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($events as $event)
                            <tr>
                                <td>{{$event->title}}</td>
                                <td>{{$event->start}}</td>
                                <td>{{$event->end}}</td>
                                <td>
                                    @can('Event-edit')
                                        <a class="btn btn-primary btn-sm" href="javascript:void(0)"
                                           onclick="event_modal_update({{$event->id}},'{{$event->start}}','{{$event->end}}','{{$event->title}}','{{$event->description}}','{{$event->venue}}' )"><i
                                                    class="fas fa-edit"></i></a>
                                    @endcan
                                    @can('Event-delete')
                                        <a class="btn btn-danger btn-sm delete_modal"
                                           data-href="{{route('event.destroy',$event->id)}}"
                                           href="javascript:void(0)"><i class="fas fa-trash-alt"></i></a>
                                    @endcan
                                </td>

                        @endforeach
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>

@endsection

@section('modal')
    <div class="modal fade" id="Event_add_modal">
        <form action="{{route('event.store')}}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title h6">{{__('Event Setup')}}</h5>
                        <button type="button" class="close" data-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <table class="table aiz-table mb-0">
                            <tbody>
                            <tr>
                                <td><label for="description">Title<span style="color: red;">*</span></label></td>
                                <td><input class="form-control" type="text" id="description" value=""
                                           placeholder="Type Description" name="title"
                                           required></td>
                            </tr>
                            <tr>
                                <td><label for="description">Description<span style="color: red;">*</span></label></td>
                                <td><textarea class="form-control" name="description" id="" cols="30"
                                              rows="5"></textarea></td>
                            </tr>
                            <tr>
                                <td><label for="">From<span style="color: red;">*</span></label></td>
                                <td><input class="form-control" placeholder="Enter Received Amount"
                                           type="datetime-local"
                                           name="from" id="from" value="" required>
                                </td>
                            </tr>

                            <tr>
                                <td><label for="">To<span style="color: red;">*</span></label></td>
                                <td><input class="form-control" placeholder="Enter Received Amount"
                                           type="datetime-local"
                                           name="to" id="to" value="" required>
                                </td>
                            </tr>

                            <tr>
                                <td><label for="">Venue Name<span style="color: red;">*</span></label></td>
                                <td><input class="form-control" placeholder="Enter Venue Name"
                                           type="text"
                                           name="venue" id="to" value="" required>
                                </td>
                            </tr>

                            <tr>
                                <td><label for="">Image</label></td>
                                <td><input class="form-control" placeholder="Enter Venue Name"
                                           type="file"
                                           name="images" id="to" value="">
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{__('Cancel')}}</button>
                        <button type="submit" id="" class="btn btn-primary">{{__('Save')}}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>


    <div class="modal fade" id="Event_add_modal_update">
        <form action="{{route('event.update')}}" method="POST">
            @csrf
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title h6">{{__('Event Update')}}</h5>
                        <button type="button" class="close" data-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <table class="table aiz-table mb-0">
                            <tbody>
                            <tr>
                                <input type="hidden" name="id" id="id">
                                <td><label for="description">Title<span style="color: red;">*</span></label></td>
                                <td><input class="form-control" type="text" id="titles" value=""
                                           placeholder="Type Description" name="title"
                                           required></td>
                            </tr>
                            <tr>
                                <td><label for="description">Description<span style="color: red;">*</span></label></td>
                                <td><textarea class="form-control" name="description" id="descriptions" cols="30"
                                              rows="5"></textarea></td>
                            </tr>
                            <tr>
                                <td><label for="">From<span style="color: red;">*</span></label></td>
                                <td><input class="form-control" placeholder="Enter Received Amount"
                                           type="datetime-local"
                                           name="from" id="froms" value="" required>
                                </td>
                            </tr>

                            <tr>
                                <td><label for="">To<span style="color: red;">*</span></label></td>
                                <td><input class="form-control" placeholder="Enter Received Amount"
                                           type="datetime-local"
                                           name="to" id="tos" value="" required>
                                </td>
                            </tr>
                            <tr>
                                <td><label for="">Venue Name<span style="color: red;">*</span></label></td>
                                <td><input class="form-control" placeholder="Enter Venue Name"
                                           type="text"
                                           name="venue" id="venue" value="" required>
                                </td>
                            </tr>
                            <tr>
                                <td><label for="">Image</label></td>
                                <td><input class="form-control" placeholder="Enter Venue Name"
                                           type="file"
                                           name="images" id="to" value="">
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{__('Cancel')}}</button>
                        <button type="submit" id="" class="btn btn-primary">{{__('Update')}}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection
@section('script')
    <script>
        function event_modal_update(id, start, end, title, description, venue) {
            $('#id').val(id);
            $('#froms').val(start);
            $('#tos').val(end);
            $('#titles').val(title);
            $('#descriptions').val(description);
            $('#venue').val(venue);
            $('#Event_add_modal_update').modal('show');
        }

        const addevent = document.getElementById('addevent');

        function eventadd() {
            $('#Event_add_modal').modal('show');
        }

        addevent.addEventListener('click', eventadd);

    </script>
@endsection