@extends('inc.admin_app')
@section('content')
<section>
    <div class="container-fluid pt-3">
        <div class="row">
            <div class="col-lg-6">
                <span>Edit Agenda</span>
            </div>
            <div class="col-lg-6">
                <a href="#" class="btn btn-sm btn-light float-right border" data-target="#mdlAddDay"
                    data-toggle="modal"><i class="fa fa-calendar text-primary" aria-hidden="true"></i> Add Day</a>
            </div>
        </div>
        <div class="row">
            @foreach($days as $key => $day)
            <div class="col-12 py-2">
                <div class="bg-white px-3 pb-0 pt-4 pb-1 shadow-sm border">
                    @php
                    $date = date_format(date_create_from_format('Y-m-d', $day->day), 'l F d, Y');
                    $agendas = $day->agendas;
                    $originalDate = date_format(date_create_from_format('Y-m-d', $day->day), 'm/d/Y');
                    @endphp
                    <span class="font-weight-bold">
                        Day {{$key + 1}} | {{$date}}
                    </span> | {{$day->title}}
                    <a href="#" class="btn btn-sm btn-light mr-1 btnAddAgenda float-right" data-target="#mdlAddTime"
                        data-toggle="modal" data-day="{{$day->id}}">
                        <i class="fas fa-plus text-primary"></i>
                    </a>
                    <a class="btn btn-light btn-sm btnEditDay float-right" data-day="{{$originalDate}}"
                        data-title="{{$day->title}}" data-id="{{$day->id}}" data-toggle="modal"
                        data-target="#mdlEditDay">
                        <i class="fa fa-pencil text-primary" aria-hidden="true"></i>
                    </a>
                    <a href="#" class="btn btn-light btn-sm btnDeleteDay float-right" data-id="{{$day->id}}"
                        data-toggle="modal" data-target="#mdlDeleteDay">
                        <i class="fa fa-trash text-danger" aria-hidden="true"></i>
                    </a>
                    <table class="table agenda-table mt-3">
                        <thead>
                            <tr>
                                <th scope="col">Time</th>
                                <th scope="col">Event</th>
                                <th scope="col">Venue</th>
                                <th scope="col">Dress Code</th>
                                <th scope="col">Sponsor</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($agendas as $agenda)
                            @php
                            $from = date_format(date_create_from_format('H:i:s', $agenda->from), 'h:i A');
                            $to = date_format(date_create_from_format('H:i:s', $agenda->to), 'h:i A');
                            @endphp
                            <tr>
                                <td>{{$from}} -
                                     @if($to == '12:00 AM')
                                        onwards
                                    @else
                                        {{$to}}
                                    @endif
                                </td>
                                <td>{{$agenda->event}}</td>
                                <td>{{$agenda->venue}}</td>
                                <td>{{$agenda->dress}}</td>
                                <td>
                                    @if($agenda->sponsor != "")
                                    <img src="{{asset('img/agenda-sponsors/'. $agenda->sponsor)}}"
                                        class="img-fluid agenda-sponsor">
                                    @endif
                                </td>
                                <td>
                                    <a href="#" class="btn btn-light btn-sm btnDeleteEvent" data-id="{{$agenda->id}}"
                                        data-toggle="modal" data-target="#mdlDeleteEvent">
                                        <i class="fa fa-trash text-danger" aria-hidden="true"></i>
                                    </a>
                                    <a href="#" class="btn btn-light btn-sm btnEditEvent" data-id="{{$agenda->id}}"
                                        data-from="{{$from}}" data-to="{{$to}}" data-event="{{$agenda->event}}"
                                        data-dress="{{$agenda->dress}}" data-venue="{{$agenda->venue}}"
                                        data-toggle="modal" data-target="#mdlEditEvent">
                                        <i class="fa fa-pencil text-primary" aria-hidden="true"></i>
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!-- Modal Add Day -->
<div class="modal fade" id="mdlAddDay" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Add Day</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="addDay" method="post">
                <div class="modal-body">
                    <input type="hidden" name="_token" value="{{csrf_token()}}">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Date</label>
                        <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                            <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"
                                name="day" required />
                            <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                                <div class="input-group-text"><i class="fa fa-calendar text-primary"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Title</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Title"
                            name="title" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light border btn-sm" data-dismiss="modal"><i
                            class="fas fa-ban text-danger"></i> Cancel</button>
                    <button type="submit" class="btn btn-light border btn-sm"><i class="fas fa-plus text-primary"></i>
                        Add</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Modal Add Time -->
<div class="modal fade" id="mdlAddTime" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Add Event</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="addAgenda" method="post" enctype="multipart/form-data">
                <div class="modal-body">
                    <input type="hidden" name="_token" value="{{csrf_token()}}">
                    <input type="hidden" name="day" class="dayToAdd">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="exampleInputEmail1">From</label>
                                <div class="input-group date" id="timePicker" data-target-input="nearest">
                                    <input type="text" class="form-control datetimepicker-input"
                                        data-target="#timePicker" name="timeFrom" required />
                                    <div class="input-group-append" data-target="#timePicker"
                                        data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-clock-o text-primary"
                                                aria-hidden="true"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="exampleInputEmail1">To</label>
                                <div class="input-group date" id="timePickerTo" data-target-input="nearest">
                                    <input type="text" class="form-control datetimepicker-input"
                                        data-target="#timePickerTo" name="timeTo" required />
                                    <div class="input-group-append" data-target="#timePickerTo"
                                        data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-clock-o text-primary"
                                                aria-hidden="true"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="exampleInputPassword1">Agenda</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Agenda"
                            name="agenda">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Venue</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Venue"
                            name="venue">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Dress Code</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Dress Code"
                            name="dress">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Dress Code</label>
                        <div class="input-group mb-3">
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="inputGroupFile01"
                                    aria-describedby="inputGroupFileAddon01" name="sponsor">
                                <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light border btn-sm" data-dismiss="modal"><i
                            class="fas fa-ban text-danger"></i> Cancel</button>
                    <button type="submit" class="btn btn-light border btn-sm"><i class="fas fa-plus text-primary"></i>
                        Add</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Delete Event -->
<div class="modal fade" id="mdlDeleteEvent" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Delete Event</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="deleteEvent" method="post">
                <div class="modal-body">
                    <input type="hidden" name="_token" value="{{csrf_token()}}">
                    <input type="hidden" name="eventtodelete" value="" id="iptEventToDelete">
                    Are you sure you want to delete this entry?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light border btn-sm" data-dismiss="modal"><i
                            class="fas fa-ban text-danger"></i> Cancel</button>
                    <button type="submit" class="btn btn-light border btn-sm"><i class="fas fa-plus text-primary"></i>
                        Yes</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Modal Edit Time -->
<div class="modal fade" id="mdlEditEvent" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Edit Event</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="updateAgenda" method="post" enctype="multipart/form-data">
                <div class="modal-body pb-1">
                    <input type="hidden" name="_token" value="{{csrf_token()}}">
                    <input type="hidden" name="id" value="{{csrf_token()}}" id="idEdit">
                    <input type="hidden" name="agenda_id" value="" id="agendaId" />
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="exampleInputEmail1">From</label>
                                <div class="input-group date" id="timePickerEdit" data-target-input="nearest">
                                    <input type="text" class="form-control datetimepicker-input"
                                        data-target="#timePickerEdit" name="timeFrom" id="editTimeFrom" required />
                                    <div class="input-group-append" data-target="#timePickerEdit"
                                        data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-clock-o text-primary"
                                                aria-hidden="true"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="exampleInputEmail1">To</label>
                                <div class="input-group date" id="timePickerToEdit" data-target-input="nearest">
                                    <input type="text" class="form-control datetimepicker-input"
                                        data-target="#timePickerToEdit" name="timeTo" id="editTimeTo" required />
                                    <div class="input-group-append" data-target="#timePickerToEdit"
                                        data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-clock-o text-primary"
                                                aria-hidden="true"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Agenda</label>
                        <input type="text" class="form-control" placeholder="Agenda" name="agenda" id="editAgenda">
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="exampleInputPassword1">Venue</label>
                                <input type="text" class="form-control" placeholder="Venue" name="venue" id="editVenue">
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="exampleInputPassword1">Dress Code</label>
                                <input type="text" class="form-control" placeholder="Dress Code" name="dress"
                                    id="editDress">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="exampleInputPassword1">Sponsor</label>
                                <div class="input-group mb-3">
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="inputGroupFile01"
                                            aria-describedby="inputGroupFileAddon01" name="sponsor">
                                        <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group form-check">
                                <input type="checkbox" class="form-check-input" id="exampleCheck1" name="deleteexisting"
                                    value="1">
                                <label class="form-check-label" for="exampleCheck1">Delete Existing Sponsor</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light border btn-sm" data-dismiss="modal"><i
                            class="fas fa-ban text-danger"></i> Cancel</button>
                    <button type="submit" class="btn btn-light border btn-sm"><i class="fa fa-floppy-o text-primary"
                            aria-hidden="true"></i> Save</button>
                </div>
            </form>

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

<!-- Modal Edit Day -->
<div class="modal fade" id="mdlEditDay" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Edit Day</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="updateDay" method="post">
                <div class="modal-body">
                    <input type="hidden" name="_token" value="{{csrf_token()}}">
                    <input type="hidden" name="id" value="" id="dayIdEdit">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Date</label>
                        <div class="input-group date" id="dateTimeDayEdit" data-target-input="nearest">
                            <input type="text" class="form-control datetimepicker-input" data-target="#dateTimeDayEdit"
                                name="day" required id="dayEdit" />
                            <div class="input-group-append" data-target="#dateTimeDayEdit" data-toggle="datetimepicker">
                                <div class="input-group-text"><i class="fa fa-calendar text-primary"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Title</label>
                        <input type="text" class="form-control" id="titleEdit" placeholder="Title" name="title"
                            required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light border btn-sm" data-dismiss="modal"><i
                            class="fas fa-ban text-danger"></i> Cancel</button>
                    <button type="submit" class="btn btn-light border btn-sm"><i class="fa fa-floppy-o text-primary"
                            aria-hidden="true"></i> Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Delete Day -->
<div class="modal fade" id="mdlDeleteDay" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Delete Day</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="deleteDay" method="post">
                <div class="modal-body">
                    <input type="hidden" name="_token" value="{{csrf_token()}}">
                    <input type="hidden" name="id" value="" id="iptDayToDelete">
                    Are you sure you want to delete this Day?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light border btn-sm" data-dismiss="modal"><i
                            class="fas fa-ban text-danger"></i> Cancel</button>
                    <button type="submit" class="btn btn-light border btn-sm"><i class="fa fa-trash text-primary"
                            aria-hidden="true"></i> Yes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $('#datetimepicker1').datetimepicker({
        datepicker:false,
            format: 'L'
        });
        $('#timePicker').datetimepicker({
            datepicker:false,
            format: 'LT'
        });
        $('#timePickerTo').datetimepicker({
            datepicker:false,
            format: 'LT'
        });
        $('#timePickerEdit').datetimepicker({
            datepicker:false,
            format: 'LT'
        });
        $('#timePickerToEdit').datetimepicker({
            datepicker:false,
            format: 'LT'
        });
        $('#dateTimeDayEdit').datetimepicker({
            datepicker:false,
            format: 'L'
        });



        $('.btnAddAgenda').on('click', function(){
            $('.dayToAdd').val($(this).data('day'));
        });
        $('.btnDeleteEvent').on('click', function(){
            $('#iptEventToDelete').val($(this).data('id'));
        });
        $('.btnEditEvent').on('click', function(){
            $('#editTimeFrom').val($(this).data('from'));
            $('#editTimeTo').val($(this).data('to'));
            $('#editAgenda').val($(this).data('event'));
            $('#editVenue').val($(this).data('venue'));
            $('#editDress').val($(this).data('dress'));
            $('#idEdit').val($(this).data('id'));
        });
        $('.btnEditDay').on('click', function(){
            $('#dayEdit').val($(this).data('day'));
            $('#titleEdit').val($(this).data('title'));
            $('#dayIdEdit').val($(this).data('id'));
        })
        $('.btnDeleteDay').on('click', function(){
            $('#iptDayToDelete').val($(this).data('id'));
        })
</script>
@endsection