@extends('backend.layouts.app')

@section('content')

    <h2 class="title">回送車使用状況</h2>
    {{ Form::open(["route"=>"backend.{$department}.forwarding_request.forwarding_calendar", "method"=>"get", "id"=>"calendar_search_form"]) }}
    <div class="table-search_wrap mb10">
        <h3 class="search_title">検索条件</h3>
        <input type="hidden" name="current_month" value="{{ isset($current_month) ? $current_month : '' }}" id="current_month">
        <table class="normal mb20 three_table">
            <tr>
                <th>社用車種別</th>
                <td>
                    <div class="select-wrap">
                        <label>
                            <select name="search_params[own_vehicle_type]">
                                <option value="">--</option>
                                @foreach (config('const.own_vehicle_type') as $key=>$item)
                                    <option value="{{ $key }}" {{ (isset($search_params['own_vehicle_type']) ? $search_params['own_vehicle_type'] : "") == $key ? "selected" : "" }}>{{ $item }}</option>
                                @endforeach
                            </select>
                        </label>
                    </div>
                </td>
                <th>ドアナンバー</th>
                <td>
                    <input type="text" name="search_params[door_number]" class="input-text" value="{{ isset($search_params['door_number']) ? $search_params['door_number'] : '' }}">
                </td>
                <th>登録番号</th>
                <td>
                    <input type="text" name="search_params[register_no]" class="input-text" value="{{ isset($search_params['register_no']) ? $search_params['register_no'] : '' }}">
                </td>
            </tr>
        </table>
        <div class="center-submit center">
            <input type="submit" value="検索">
            <input type="button" value="クリア" onclick='location.href="{{ route("backend.{$department}.forwarding_request.forwarding_calendar") }}"'>
        </div>
    </div>
    {{ Form::close() }}
    <div class="status_color">
        <ul>
            <li class="st_skyblue">回送日</li>
        </ul>
    </div>
    <div class="clearfix"></div><div class="hscroll-sp">
        <table class="normal type5 " id="calendar_table">
            <thead>
            <tr>
                @php
                    $start_month = 1;
                    $end_month = 1;
                    $current_date = Carbon::now();
                    if (Carbon::parse($start_time)->diffInMonths(Carbon::parse($current_month)) > 0 || (Carbon::parse($start_time)->diffInMonths(Carbon::parse($current_month)) == 0 && intval(Carbon::parse($current_month)->format('m')) - intval(Carbon::parse($start_time)->format('m')) == 1)){
                        $start_month = 0;
                    }
                    if (Carbon::parse($end_time)->diffInMonths(Carbon::parse($current_month)) != 0){
                        $end_month = 0;
                    }
                    $start_day = 1;
                    $end_day = intval(Carbon::parse($current_month.'-01')->endOfMonth()->format('d'));
                    if($start_month == 1 && $end_month == 1){
                        $start_day = intval(Carbon::parse($start_time)->format('d'));
                        $end_day = intval(Carbon::parse($end_time)->format('d'));
                    } else if($start_month == 1 && $end_month != 1){
                        $start_day = intval(Carbon::parse($start_time)->format('d'));
                    } else if($start_month != 1 && $end_month == 1){
                        $end_day = intval(Carbon::parse($end_time)->format('d'));
                    }
                    $period = Carbon\CarbonPeriod::create(Carbon::now()->subDays(30)->format('Y-m-d'), Carbon::now()->addDays(30)->format('Y-m-d'));
                @endphp
                {{--
                <th class="" rowspan="3">管理担当者</th>
                --}}
                <th class="w100" rowspan="3">社用車種別 @sortablelink('own_vehicle_type', ' ▲▼')</th>
                <th class="w100" rowspan="3">ドアナンバー @sortablelink('door_number', ' ▲▼')</th>
                <th class="w100" rowspan="3">登録番号 @sortablelink('register_no', ' ▲▼')</th>
                <th class="w100" rowspan="3">型式 @sortablelink('vehicle_model', ' ▲▼')</th>
                @if (($period->last()->month - $period->first()->month) < 2)
                    <th class="month_head_{{ $period->first()->month }} non-border-bottom" colspan="{{ $period->first()->copy()->endOfMonth()->day - $period->first()->day + 1 }}">{{ $period->first()->year.'年'.$period->first()->month.'月' }}</th>
                    <th class="month_head_{{ $period->last()->month }} non-border-bottom" colspan="{{ $period->last()->day }}">{{ $period->last()->year.'年'.$period->last()->month.'月' }}</th>
                @else
                    <th class="month_head_{{ $period->first()->month }} non-border-bottom" colspan="{{ $period->first()->copy()->endOfMonth()->day - $period->first()->day + 1 }}">{{ $period->first()->year.'年'.$period->first()->month.'月' }}</th>
                    <th class="month_head_{{ $period->first()->month + 1 }} non-border-bottom" colspan="{{ $period->first()->copy()->addDays(30)->endOfMonth()->day }}">{{ $period->first()->year.'年'.($period->first()->copy()->month + 1).'月' }}</th>
                    <th class="month_head_{{ $period->last()->month }} non-border-bottom" colspan="{{ $period->last()->day }}">{{ $period->last()->year.'年'.$period->last()->month.'月' }}</th>
                @endif
            </tr>
            <tr>
                @foreach ($period as $item)
                    <th class="day_index_{{ $item->month }}_{{ $item->day }} {{ $item->isYesterday() ? 'yesterday' : '' }} {{ $item->isTomorrow() ? 'tomorrow' : '' }} {{ $item->isToday() ? 'current_date' : '' }} {{ $item->dayOfWeek == Carbon::SATURDAY ? 'Sat' : ($item->dayOfWeek == Carbon::SUNDAY ? 'Sun' : '') }}">{{ $item->day }}</th>
                @endforeach
            </tr>
            <tr>
                @foreach ($period as $item)
                    <th class="day_index_{{ $item->month }}_{{ $item->day }} {{ $item->isYesterday() ? 'yesterday' : '' }} {{ $item->isTomorrow() ? 'tomorrow' : '' }} {{ $item->isToday() ? 'current_date' : '' }} {{ $item->dayOfWeek == Carbon::SATURDAY ? 'Sat' : ($item->dayOfWeek == Carbon::SUNDAY ? 'Sun' : '') }}">{{ config('const.jp_week.'.$item->dayOfWeek) }}</th>
                @endforeach
            </tr>
            </thead>
            <tbody>
            @if ($vehicles->count() > 0)
                @foreach ($vehicles as $vehicle)
                    <tr>
                        <td class="w100">{{ config('const.own_vehicle_type.'.$vehicle->own_vehicle_type) }}</td>
                        <td class="w100">{{ $vehicle->door_number }}</td>
                        <td class="w100">{{ $vehicle->register_no }}</td>
                        <td class="w100">{{ $vehicle->vehicleModel() }}</td>
                        @foreach ($period as $item)
                            <td class="day_index_{{ $item->month }}_{{ $item->day }} {{ $item->isYesterday() ? 'yesterday' : '' }} {{ $item->isTomorrow() ? 'tomorrow' : '' }} {{ $loop->parent->last ? 'last' : '' }} {{ $item->isToday() ? 'current_date' : '' }} {{ $vehicle->forwardingStatusClass($item->format('Y-m-d')) }}"></td>
                        @endforeach
                    </tr>
                @endforeach
            @else
                <tr>
                    <td colspan="{{ $period->count() + 4 }}">データが存在しません。</td>
                </tr>
            @endif
            <tr>
                <td class="non-border" colspan="4"></td>
                <td class="non-border" colspan="10" id="sloder_td">
                    <div id="calendar_slider">
                        <span></span>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="center-submit center">
        <input type="button" value="TOPへ戻る" onclick='location.href="{{ route("backend.{$department}.dashboard.index") }}"'>
    </div>

@endsection

@section('page_css')

    <link href="{{ asset('vendor/select2/css/select2.min.css') }}" rel="stylesheet">
    <link href="{{ asset('vendor/datetimepicker/jquery.datetimepicker.css') }}" rel="stylesheet">
    <style>
        table#calendar_table .w100 {
            width: 100px !important;
        }
        table#calendar_table {
            border: none !important;
        }
        table.normal.type5 th.w40,
        table.normal.type5 td.table-link {
            min-width: 40px !important;
        }
        #sloder_td {
            padding: 5px 0 !important;
        }
        #calendar_slider {
            border: 1px solid #f0f0f0;
            background-color: #f0f0f0;
            width: 100%;
            cursor: pointer;
            height: 15px;
            position: relative;
        }

        #calendar_slider span {
            width: 23.5%;
            height: 100%;
            position: absolute;
            top: 0;
            background-color: #cecece;
        }
        #calendar_slider span:hover {
            background-color: #b3b3b3;
        }
        .current_date {
            border-left: 2px solid red !important;
            border-right: 2px solid red !important;
        }
        .tomorrow {
            border-left: 2px solid red !important;
        }
        .yesterday {
            border-right: 2px solid red !important;
        }
        .normal.type5  thead tr:nth-child(2) th.current_date {
            border-top: 2px solid red !important;
        }
        td.last.current_date {
            border-bottom: 2px solid red !important;
        }
        .ui-datepicker{
            z-index: 1000 !important;
        }
        td.table-link {
            width: 50px !important;
        }
        th a {
            text-decoration: none !important;
        }
        table.normal td{
            padding: 3px 2px !important;
        }
        .non-border-bottom {
            border-bottom: none !important;
        }
    </style>
@endsection

@section('page_js')

    <script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('vendor/jquery-ui/i18n/datepicker-ja.js') }}"></script>
    <script>
        var lastScrollLeft = 0;
        var lastScrollTop = 0;
        let offset = 0;
        let current_day = parseInt("{{ $current_date->day }}");
        let current_month = parseInt("{{ $current_date->month }}");
        let last_month = parseInt("{{ $period->last()->month }}");
        let first_month = parseInt("{{ $period->first()->month }}");
        let last_day = parseInt("{{ $period->last()->day }}");
        let first_day = parseInt("{{ $period->first()->day }}");
        let last_day_of_month = {};
        last_day_of_month[last_month] = parseInt("{{ $period->last()->copy()->endOfMonth()->day }}");
        last_day_of_month[first_month] = parseInt("{{ $period->first()->copy()->endOfMonth()->day }}");
        if(last_month - first_month === 2) {
            last_day_of_month[current_month] = parseInt("{{ $current_date->copy()->endOfMonth()->day }}");
        }
        $(document).ready(function() {

            $('#search_btn').click(function(){
                $("#current_month").prop('disabled', 'true');
                $("#calendar_search_form").submit();
            });

            moveCalendar(0);
            function moveCalendar(direction) {
                if(offset < -30 || offset > 21) {
                    return false;
                }
                if((direction + offset) < -31 || (offset + direction) > 22) {
                    return false;
                }
                let past_day = current_day;
                if(direction < 0) {
                    if(current_month > first_month) {
                        if(current_day > Math.abs(direction)) {
                            current_day += direction;
                        } else {
                            if(Math.abs(direction) > current_day + last_day_of_month[current_month-1]) {
                                if(current_month - first_month === 1) {
                                    current_month = first_month;
                                    current_day = first_day;
                                } else {
                                    current_month = first_month;
                                    current_day = (last_day_of_month[first_month]) + last_day_of_month[first_month+1] + current_day + direction;
                                }
                            } else {
                                if((current_month === (first_month + 1) && last_day_of_month[current_month] - (direction + current_day) > first_day) ||
                                    current_month !== (first_month + 1)){
                                    current_month--;
                                    current_day = last_day_of_month[current_month] + (current_day+direction);
                                } else {
                                    current_month = first_month;
                                    direction = (first_day-last_day_of_month[first_month]) - current_day;
                                    current_day = first_day;
                                }
                            }
                        }
                    } else {
                        if(first_day < (current_day+direction)) {
                            current_day += direction;
                        } else {
                            direction = first_day - current_day;
                            current_day = first_day;
                        }
                    }
                } else if(direction > 0) {
                    if(current_month === last_month) {
                        if((current_day + direction) < parseInt("{{ $period->last()->copy()->subDays(9)->day }}")) {
                            current_day += direction;
                        } else {
                            direction = parseInt("{{ $period->last()->copy()->subDays(9)->day }}") - current_day;
                            current_day = parseInt("{{ $period->last()->copy()->subDays(9)->day }}");
                        }
                    } else {
                        if(direction > ((current_month === (last_month-1) ? (parseInt("{{ $period->last()->copy()->subDays(9)->day }}")) : (last_day_of_month[current_month+1])) + (last_day_of_month[current_month] - current_day))) {
                            current_month++;
                            if(current_month === last_month ) {
                                direction = last_day_of_month[current_month-1]-current_day + (parseInt("{{ $period->last()->copy()->subDays(9)->day }}"));
                                current_day = (parseInt("{{ $period->last()->copy()->subDays(9)->day }}"));
                            } else {
                                current_month = last_month;
                                current_day = direction - (last_day_of_month[current_month-2]-current_day)-last_day_of_month[current_month-1];
                            }
                        } else {
                            if (last_day < 10 && current_month === (last_month-1)) {
                                if((current_day + direction) <= parseInt("{{ $period->last()->copy()->subDays(9)->day }}")) {
                                    current_day += direction;
                                } else {
                                    direction = parseInt("{{ $period->last()->copy()->subDays(9)->day }}") - current_day;
                                    current_day = parseInt("{{ $period->last()->copy()->subDays(9)->day }}");
                                }
                            } else {
                                if(current_day + direction > last_day_of_month[current_month]) {
                                    current_month++;
                                    current_day = (current_day + direction - last_day_of_month[current_month-1]);
                                } else {
                                    current_day += direction;
                                }
                            }
                        }
                    }
                }
                if(last_day_of_month[current_month] - current_day < 9) {
                    $(".month_head_" + current_month).attr('colspan', (last_day_of_month[current_month] - current_day + 1));
                    $(".month_head_" + (current_month + 1)).attr('colspan', (10 - (last_day_of_month[current_month] - current_day)));
                } else {
                    $(".month_head_" + current_month).attr('colspan', '10');
                }
                for (let month = first_month; month <= last_month; month++) {
                    if (month !== current_month) {
                        $(".month_head_" + month).hide();
                    } else {
                        $(".month_head_" + month).show();
                    }
                    if(last_day_of_month[current_month] - current_day < 9) {
                        $(".month_head_" + (current_month + 1)).show();
                    }
                    for (let day = 1; day <= 31; day++) {
                        if (month === current_month && (day >= current_day && day < (current_day + 10))) {
                            $(".day_index_" + month + '_' + day).show();
                        } else {
                            if(last_day_of_month[current_month] - current_day < 9 &&
                                month === (current_month + 1) &&
                                day < (10 - (last_day_of_month[current_month] - current_day))) {
                                $(".day_index_" + month + '_' + day).show();
                            } else {
                                $(".day_index_" + month + '_' + day).hide();
                            }
                        }
                    }
                }
                if(past_day !== current_day) {
                    offset += direction;
                    if(offset > 21) {
                        offset = 21;
                    } else if(offset < -30) {
                        offset = -30;
                    }
                    $("#calendar_slider span").css('left', (offset * 1.5 + 45) + '%');
                }
            }

            $("#calendar_slider").click(function (event) {
                if(!is_moveable) {
                    if(event.pageX < ($("#calendar_slider span").offset().left + ($("#calendar_slider span").width()/2))) {
                        moveCalendar(-1);
                    } else {
                        moveCalendar(1);
                    }
                }
            });
            let is_draggable = false;
            let is_moveable = false;
            $("#calendar_slider span").mousedown(function(e) {
                is_draggable = true;
                return false;
            });
            $(document).mousemove(function(event) {
                if(is_draggable) {
                    is_moveable = true;
                } else {
                    is_moveable = false;
                }
            });

            $(document).mouseup(function(event) {
                if(is_draggable && is_moveable) {
                    let pos_x = event.pageX;
                    if(pos_x < $("#calendar_slider").offset().left) {
                        pos_x = $("#calendar_slider").offset().left;
                    } else if(pos_x > ($("#calendar_slider").offset().left + $("#calendar_slider").width() / 100 * 76.5)) {
                        pos_x = ($("#calendar_slider").offset().left + $("#calendar_slider").width() / 100 * 76.5);
                    }
                    let start_position = $("#calendar_slider").offset().left + ($("#calendar_slider").width() / 100 * (offset * 1.5 + 45));
                    let unit = $("#calendar_slider").width()/100*1.5;
                    let offset_x = Math.round((pos_x - start_position) / unit);
                    if((offset_x + offset) < -30) {
                        offset_x = (-30 - offset);
                    } else if((offset_x + offset) > 21) {
                        offset_x = (21 - offset);
                    }
                    if(pos_x < ($("#calendar_slider span").offset().left + ($("#calendar_slider span").width()/2))) {
                        moveCalendar(offset_x);
                    } else {
                        moveCalendar(offset_x);
                    }
                }
                is_draggable = false;
                return false;
            });
        });

        function goByMonth(target){
            var month = "{{ Carbon::parse($current_month)->format('m') }}";
            var year = "{{ Carbon::parse($current_month)->format('Y') }}";
            if(target == 0){
                if(parseInt(month) == 1){
                    month = 12;
                    year = parseInt(year) - 1;
                } else {
                    month = parseInt(month) - 1;
                }
            } else {
                if(parseInt(month) == 12){
                    month = 1;
                    year = parseInt(year) + 1;
                } else {
                    month = parseInt(month) + 1;
                }
            }
            var target_month = year + '-' + (month < 10 ? '0' + month : month);
            $("#current_month").val(target_month);
            $("#calendar_search_form").submit();
        }
    </script>
@endsection