@extends("layouts.app")

@section('title', 'Dashboard')

@push('css')
    @include('panel.inc.datatable.css')
@endpush

@section('content')
    <!-- Page title -->
    <div class="page-header d-print-none">
        <div class="row align-items-center">
            <div class="col">
                <!-- Page pre-title -->
                <div class="page-pretitle">
                    Overview
                </div>
                <h2 class="page-title">
                    Dashboard
                </h2>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-md-6 mb">
            <div class="card clock">
                <div class="card-body">
                    <div class="row g-2 align-items-center">
                        <div class="col-auto">
                            <span class="{{ $isClockRunning ? 'bg-green' : 'bg-red' }} text-white avatar">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="9" /><polyline points="12 7 12 12 15 15" /></svg>
                            </span>
                        </div>
                        <div class="col">
                            <div class="text-muted clock-text">
                                {{ $isClockRunning ? 'Clock started at: '.$attendance->clock_in->format('M d, Y - h:i A') : 'You are currently clocked out.' }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <a href="javascript:void(0)" class="btn {{ $isClockRunning ? 'btn-success clockOut' : 'btn-danger clockIn' }}">
                                {{ $isClockRunning ? 'Clock Out' : 'Clock In' }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb">
            @include('_announcements', ['announcements' => $announcements])
        </div>
    </div>

    @if(\Gate::allows('campaigns'))
        <div class="card mb">
            <div class="card-header">
                <h2 class="card-title">
                    Projects - Due Reminders
                </h2>
            </div>
            <table class="table table-vcenter card-table">
                <thead>
                <tr>
                    <th>Project Title</th>
                    <th>Reminder</th>
                    <th>Reminder Due Date</th>
                    <th class="w-1"></th>
                </tr>
                </thead>
                <tbody>
                @foreach($reminders as $reminder)
                    <tr>
                        <td>{{ $reminder->campaign->title }}</td>
                        <td>{{ $reminder->title }}</td>
                        <td>{{ $reminder->due_date->toDateString() }}</td>
                        <td>
                            @if(\Gate::allows('campaigns-reminders'))
                                <a class="btn btn-dark btn-icon" href="{{ route('panel.campaigns.reminders', $reminder->campaign->id) }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle cx="12" cy="12" r="2"></circle><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"></path></svg>
                                </a>
                            @endif
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        <div class="card mb">
            <div class="card-header">
                <h2 class="card-title">
                    Projects - Payments for {{ now()->format('F Y') }}
                </h2>
            </div>
            <table class="table table-vcenter card-table">
                <thead>
                <tr>
                    <th>Project Title</th>
                    <th>Customer</th>
                    <th>Payment Date</th>
                    <th>Status</th>
                    @if(\Gate::allows('campaigns-payments'))
                        <th class="w-1"></th>
                    @endif
                </tr>
                </thead>
                <tbody>
                @foreach($campaigns as $campaign)
                    <tr>
                        <td>{{ $campaign->title }}</td>
                        <td>{{ $campaign->customer->name }}</td>
                        <td>{{ now()->monthName . ' '.$campaign->payment_date. ', '. now()->year }}</td>
                        <td>{!! $campaign->getPaymentStatus() !!}</td>
                        @if(\Gate::allows('campaigns-payments'))
                        <td>
                            <a class="btn btn-dark btn-icon" href="{{ route('panel.campaigns.payments', $campaign->id) }}">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle cx="12" cy="12" r="2"></circle><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"></path></svg>
                            </a>
                        </td>
                        @endif
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    @endif

    <div class="modal modal-blur fade" id="clockOutModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
            <div class="modal-content">
                <form id="clockOutForm" method="post" action="{{ route('panel.clock-out') }}">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Clock Out')  }}</h5>
                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb">
                            <label class="form-label">{{ __('Type') }}</label>
                            <select name="type" id="type" class="form-control" required>
                                <option value=""></option>
                                @foreach(\App\AttendanceType::all() as $type)
                                    <option value="{{ $type->title }}">{{ $type->title }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb">
                            <label class="form-label">{{ __('Description') }}</label>
                            <textarea name="description" rows="3" placeholder="Enter Description" class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-danger mr-auto" data-dismiss="modal">{{ __('Close') }}</button>
                        <button type="submit" class="btn btn-primary submission">{{ __('Submit') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@push('script')
    @include('panel.inc.datatable.js')

    <script !src="">
        $('.card-table').DataTable();
        $('#type').selectize({
            placeholder: 'Select Attendance Type'
        });

        $(document).on('click', '.clockIn', function(){
            let btn = this;
            $(btn).btnloading();
            axios.post('{{ route('panel.clock-in') }}')
                .then(function(r){
                    $('.clock .avatar').removeClass('bg-red').addClass('bg-green');
                    $('.clock .clock-text').text('Clock started at: '+ r.data.time);
                    $('.clock .clockIn').removeClass('btn-danger clockIn').addClass('btn-success clockOut').text('Clock Out');
                }).catch(function(e){
                notify('error', e.response.data.message);
            })
                .then(function(){
                    $(btn).btnreset();
                })
        })

        $(document).on('click', '.clockOut', function(){
            $('#clockOutModal').modal('show');
        });

        $('#clockOutForm').submit(function(e){
            let form = this;
            $(form).find('.submission').btnloading();

            formHandler({form, e }).then(function (r) {
                $('#clockOutModal').modal('hide');

                $('.clock .avatar').removeClass('bg-green').addClass('bg-red');
                $('.clock .clock-text').text('You are currently clocked out.');
                $('.clock .clockOut').removeClass('btn-success clockOut').addClass('btn-danger clockIn').text('Clock In');

                $('#clockOutModal #type').data('selectize').clear();
                $(form)[0].reset();
            }).catch(function (e) {
                notify('error', e.response.data.message);
            }).then(function () {
                $(form).find('.submission').btnreset();
            })
        });
    </script>
@endpush