@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>

    <div class="row">


        {{--<div class="col-md-6 mb">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">References</h3>
                </div>
                <div class="list-group list-group-flush overflow-auto" style="max-height: 35rem">
                    @forelse($referrals as $referral)
                        <div class="list-group-item">
                            <div class="row">
                                <div class="col text-truncate">
                                    <h4 class="text-body mb-0 text-wrap">
                                        {{ $referral->user->name }}

                                        <span class="float-right" style="font-weight: 400; float: right">
                                            {{ $referral->created_at->format('h:i A') }}
                                            <br>
                                            <small>{{ $referral->created_at->format('F m, Y') }}</small>
                                        </span>
                                    </h4>
                                    <div class="text-muted text-wrap mt-n1">{{ $referral->note }}</div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="list-group-item">
                            <div class="row">
                                <div class="col text-truncate">
                                    <h4 class="text-body mb-0">No References Found!</h4>
                                </div>
                            </div>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>--}}
    </div>

    @if(\Gate::allows('leads'))
        <div class="card mb">
            <div class="card-header">
                <h2 class="card-title">
                    Leads
                </h2>
            </div>
            {!! $leadsDataTable->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')
    @if(\Gate::allows('leads'))
        {!! $leadsDataTable->scripts() !!}
    @endif

    <script !src="">

        $('#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