@extends('backend.layouts.app')

@section('content')

    <h2 class="title f-left">営業実績表</h2>
    <div class="clearfix"></div>
    @include('backend.layouts.flash-message')

    <div class="search_wrap">
        <h3 class="search_title">検索条件</h3>
        {{ Form::open(['route'=>"backend.{$department}.sales_record.index", 'method'=>'get', 'id'=>'frm_search']) }}

        <div class="table-search_wrap">
            <table class="search three_table table">
                <tr>
                    <th>車台番号</th>
                    <td><input class="input-text ele-search" type="text" name="search_info[chassis_no]" value="{{ isset($search_params['chassis_no']) ? $search_params['chassis_no'] : "" }}"></td>

                    <th>仕入担当者</th>
                    <td>
                        <div class="select-wrap">
                            <label for="">
                                <select class="ele-search" name="search_info[purchase_user_id]" style="height: 33px !important;">
                                    <option value="">---</option>
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}" {{ (isset($search_params['purchase_user_id']) ? $search_params['purchase_user_id'] : '') == $user->id ? 'selected' : '' }}>{{ $user->name_kanji }}</option>
                                    @endforeach
                                </select>
                            </label>
                        </div>
                    </td>
                    <th>仕入先</th>
                    <td>
                        <input class="input-text ele-search" type="text" name="search_info[supplier]" value="{{ isset($search_params['supplier']) ? $search_params['supplier'] : "" }}">
                    </td>
                    <th>販売日</th>
                    <td>
                        <div class="calendar-wrap3">
                            <label>
                                <input type="text" name="search_info[sale_date_from]" class="ele-search datepicker w100" value="{{ isset($search_params['sale_date_from']) ? $search_params['sale_date_from'] : "" }}">
                            </label>
                            <span>～</span>
                            <label>
                                <input type="text" name="search_info[sale_date_to]" class="ele-search datepicker w100" value="{{ isset($search_params['sale_date_to']) ? $search_params['sale_date_to'] : "" }}">
                            </label>
                        </div>
                    </td>
                    <th>販売担当</th>
                    <td>
                        <div class="select-wrap">
                            <label for="">
                                <select class="ele-search" name="search_info[sale_charge_user]" style="height: 33px !important;">
                                    <option value="">---</option>
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}" {{ (isset($search_params['sale_charge_user']) ? $search_params['sale_charge_user'] : '') == $user->id ? 'selected' : '' }}>{{ $user->name_kanji }}</option>
                                    @endforeach
                                </select>
                            </label>
                        </div>
                    </td>
                    <th>販売先</th>
                    <td>
                        <input type="text" name="search_info[sale_dest]" class="ele-search input-text" value="{{ isset($search_params['sale_dest']) ? $search_params['sale_dest'] : "" }}">
                    </td>
                </tr>
            </table>
        </div>
        <div class="center-submit center">
            <input type="hidden" name="sort" value="{{ Request::get('sort') }}">
            <input type="hidden" name="direction" value="{{ Request::get('direction') }}">
            <input type="submit" value="検索" id="btn_search">
            <input type="button" value="クリア" onclick='location.href="{{ route("backend.{$department}.sales_record.index") }}"'>
        </div>
        {{ Form::close() }}
    </div>

    <div class="hscroll">
        <div class="vehicle-list">
            <table class="normal type3 vehicle-table">
                <thead>
                <tr>
                    <th class="sticky-col td-w-50 commodity-td-left-0 title-th td-check" rowspan="2">
                        <input type="checkbox" id="ch_all">
                        <label for="ch_all" class="check_label"></label>
                    </th>
                    <th class="sticky-col td-w-50 commodity-td-left-1 title-th" rowspan="2">車両<br>詳細</th>
                    <th class="sticky-col td-w-310 commodity-td-left-2 title-th purchase_info" colspan="3">仕入情報</th>
                    <th class="sticky-col td-w-420 commodity-td-left-5 title-th vehicle_info" colspan="4">車両情報</th>
                    <th class="sticky-col td-w-80 commodity-td-left-9 title-th vehicle_info border-inf-price prime_info">車両原価</th>
                    <th class="sticky-col td-w-630 sale_info" colspan="7">販売情報</th>
                    <th class="sticky-col td-w-80" rowspan="2">粗利<br>差額</th>
                    <th class="sticky-coltd-w-80" rowspan="2">確定@sortablelink('profit_confirm', '▲▼')</th>
                </tr>
                <tr>
                    <th class="sticky-col td-w-80 second-th commodity-td-left-2 title-th">入庫日@sortablelink('input_date', '▲▼')</th>
                    {{--<th class="td-w-80">仕入担当@sortablelink('vehicle_info.purchaser.name_kanji', ' ▲▼')</th>--}}
                    <th class="sticky-col td-w-70 second-th commodity-td-left-3 title-th">仕入担当者<br>@sortablelink('purchaser', '▲▼')</th>
                    <th class="sticky-col td-w-200 second-th commodity-td-left-4 title-th">仕入先@sortablelink('supplier', '▲▼')</th>
                    <th class="sticky-col td-w-70 second-th commodity-td-left-5 title-th">初年度登録</th>
                    <th class="sticky-col td-w-100 second-th commodity-td-left-6 title-th">型式</th>
                    <th class="sticky-col td-w-130 second-th commodity-td-left-7 title-th">車台番号</th>
                    <th class="sticky-col td-w-120 second-th commodity-td-left-8 title-th">ボディ形状<br>(サブカテゴリのみ)</th>
                    <th class="sticky-col td-w-80 second-th commodity-td-left-9 title-th border-inf-price">車両価格 <br>（税別）</th>
                    <th class="td-w-70 second-th">販売日@sortablelink('sale_date', '▲▼')</th>
                    <th class="td-w-80 second-th">販売担当<br>@sortablelink('sale_charger', '▲▼')</th>
                    <th class="td-w-200 second-th">販売先@sortablelink('sale_dest', '▲▼')</th>
                    <th class="td-w-80 second-th">車両価格 <br>（税別）</th>
                    <th class="td-w-80 second-th">課税<br>小計</th>
                    <th class="td-w-80 second-th">粗利<br>（確定）</th>
                    <th class="td-w-80 second-th">粗利<br>（予想）</th>
                </tr>
            </thead>
                <tbody>
                    @php
                        $sum_p_price = 0;
                        $sum_s_price = 0;
                        $sum_profit_correct = 0;
                        $sum_profit_forecast = 0;
                    @endphp
                    @if( !empty($sales_vehicles) && count($sales_vehicles) > 0 )
                        @foreach($sales_vehicles as $vehicle)
                            @php
                            $p_vehicle_price = $vehicle->ssv_prc ? $vehicle->ssv_prc : 0;
                            $sum_p_price += $p_vehicle_price;

                            $s_vehicle_price = $vehicle->sss_prc ? $vehicle->sss_prc : 0;
                            $sum_s_price += $s_vehicle_price;

                            $p_profit_correct = $vehicle->pftc_prc ? $vehicle->pftc_prc : 0;
                            $sum_profit_correct += $p_profit_correct;

                            $p_profit_forecast = $vehicle->pftf_prc ? $vehicle->pftf_prc : 0;
                            $sum_profit_forecast += $p_profit_forecast;

                            $diff_profit = $p_profit_correct - $p_profit_forecast;
                        @endphp
                            <tr>
                                <td class="commodity-td-left-0 sticky-col text-center td-check">
                                    <input class="ch-vehicle" type="checkbox" id="ch_{{ $vehicle->v_id }}" name="search_info[ids][]" value="{{ $vehicle->v_id }}">
                                    <label for="ch_{{ $vehicle->v_id }}" class="check_label"></label>
                                </td>

                                <td class="commodity-td-left-1 sticky-col">
                                    <p><a href="{{ route("backend.{$department}.vehicle.detail",  ['vehicle'=>$vehicle->v_id]) }}">閲覧</a></p>
                                </td>
                                <td class="commodity-td-left-2 sticky-col text-prewrap text-center">{{ $vehicle->in_dt ? Carbon::parse($vehicle->in_dt)->format('Y.n.j') : '' }}</td>
                                <td class="commodity-td-left-3 sticky-col text-prewrap text-center">{{ $vehicle->su_nm }}</td>
                                <td class="commodity-td-left-4 sticky-col text-prewrap">{!! Str::limit($vehicle->cp_nm1, 28) !!}{!! $vehicle->cp_nm2 ? ('<br>' . $vehicle->cp_nm2) : '' !!}</td>
                                <td class="commodity-td-left-5 sticky-col text-prewrap text-center">{{ App\Helper\SystemHelper::convertSymbolGtJYeaMonth($vehicle->tp_y, $vehicle->tp_m, false) }}</td>
                                <td class="commodity-td-left-6 sticky-col text-prewrap text-center">{{ $vehicle->m_fst . ($vehicle->m_snd ? ('-'.$vehicle->m_snd) : '' ) }}</td>
                                <td class="commodity-td-left-7 sticky-col text-prewrap text-center">{{ $vehicle->ch_no }}</td>
                                <td class="commodity-td-left-8 sticky-col text-prewrap text-center">{{ $vehicle->ctg_nm }}</td>
                                <td class="commodity-td-left-9 sticky-col text-right border-inf-price">{{ $vehicle->pp_prc ? number_format($vehicle->pp_prc) : '' }}</td>
                                <td class="text-center">{{ $vehicle->ss_dt ? Carbon::parse($vehicle->ss_dt)->format('Y.n.j') : '' }}</td>
                                <td class="text-center">{{ $vehicle->scu_nm }}</td>
                                <td class="text-prewrap">{{ $vehicle->ssp_nm1 }}{!! $vehicle->ssp_nm2 ? ('<br>' . $vehicle->ssp_nm2) : '' !!}</td>
                                <td class="text-right">{{ number_format($p_vehicle_price)}}</td>
                                <td class="text-right">{{ number_format($s_vehicle_price)}}</td>
                                <td class="text-right profit-correct">{{ number_format($p_profit_correct) }}</td>
                                <td class="text-right profit-forecast">{{ number_format($p_profit_forecast) }}</td>
                                <td class="text-right {{ $diff_profit < 0 ? 'red' : '' }}">{{ number_format($diff_profit) }}</td>
                                <td class="text-center">{{ $vehicle->pftf_cfm ? '確定' : '' }}</td>
                            </tr>
                        @endforeach

                    @else
                        <tr>
                            <td colspan="28">検索条件を入力してください。</td>
                        </tr>
                    @endif
                </tbody>
            </table>

            <table class="normal type3 price-table">
                <tbody>
                    <tr>
                        <td class="td-w-130 non-border commodity-td-left-0" rowspan="2"></td>
                        <td class="td-w-70 sticky-col commodity-td-left-4 non-border t-bold ">全{{ $sales_vehicles ? $sales_vehicles->count() : 0 }}件</td>
                        <td class="td-w-900 non-border" colspan="9"></td>
                        <td class="td-w-200 think-border">合計</td>
                        <td class="td-w-80 text-right t-bold think-border">{{ $sum_p_price ? number_format($sum_p_price) : 0 }}</td>
                        <td class="td-w-80 text-right t-bold think-border">{{ $sum_s_price ? number_format($sum_s_price) : 0 }}</td>
                        <td class="td-w-80 text-right t-bold think-border profit-correct">{{ $sum_profit_correct ? number_format($sum_profit_correct) : 0 }}</td>
                        <td class="td-w-80 text-right t-bold think-border profit-forecast">{{ $sum_profit_forecast ? number_format($sum_profit_forecast) : 0 }}</td>
                        <td class="td-w-80 non-border"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="center-submit center">
        <input type="button" value="CSV出力" id="btn_export_excel">
        {{ Form::open(['route'=>"backend.{$department}.sales_record.export_excel", 'method'=>'post', 'id'=>'frm_export_excel']) }}
        {{ Form::close() }}
    </div>
@endsection

@section('page_css')
    <style>
        .hscroll {
            width: 100% !important;
        }
        .calendar-wrap3 img{
            margin: 0 5px !important;
        }
        .calendar-wrap3 span {
            margin: 0 !important;
        }
        .calendar-wrap3 label:nth-child(1) {
            width: 140px !important;
        }
        .search_wrap {
             padding-bottom: unset;
        }

        .vehicle-list {
            position: relative !important;
            overflow-x: scroll !important;
            width: 100% !important;
            max-height: 700px;
        }


        table.vehicle-table {
            width: unset !important;
            table-layout: fixed !important;
            border: 1px solid #000000;
            border-collapse: separate;
        }

        table.normal.type3 th, table.normal.type3 td {
            padding: 3px !important;
            border: 1px solid #000000;
        }

        table.price-table {
            border: unset;
        }

        table.normal.type3 th {
            height: 40px;
        }

        table.normal.type3 th.second-th {
            top: 40px;
        }

        .td-check {
            background-color: unset !important;
        }

        .td-check .check_label {
            position: relative;
            padding: 0 10px 0 10px;
            line-height: 200%;
        }

        th.border-inf-price, td.border-inf-price {
            border-right: 3px solid #000000 !important;
        }

        td.think-border {
            border: 2px solid #000000 !important;
        }
        .td-w-50 {
            width: 50px !important;
            min-width: 50px;
            max-width: 50px ;
        }
        .td-w-70 {
            width: 70px !important;
            min-width: 70px;
            max-width: 70px;
        }
        .td-w-80 {
            width: 80px !important;
            min-width: 80px;
            max-width: 80px;
        }
        .td-w-90 {
            width: 90px !important;
            min-width: 90px;
            max-width: 90px;
        }
        .td-w-100 {
            width: 100px !important;
            min-width: 100px;
            max-width: 100px;
        }

        .td-w-120 {
            width: 120px !important;
            min-width: 120px;
            max-width: 120px;
        }

        .td-w-130 {
            width: 130px !important;
            min-width: 130px;
            max-width: 130px;
        }
        .td-w-140 {
            width: 140px !important;
            min-width: 140px;
            max-width: 140px;
        }
        .td-w-150 {
            width: 150px !important;
            min-width: 150px;
            max-width: 150px;
        }
        .td-w-160 {
            width: 160px !important;
            min-width: 160px;
            max-width: 160px;
        }
        .td-w-200 {
            width: 200px !important;
            min-width: 200px;
            max-width: 200px;
        }

        .td-w-310 {
            width: 310px !important;
            min-width: 310px;
            max-width: 310px;
        }
        .td-w-420 {
            width: 420px !important;
            min-width: 420px;
            max-width: 420px;
        }
        .td-w-630 {
            width: 630px !important;
            min-width: 630px;
            max-width: 630px;
        }
        .td-w-900 {
            width: 900px !important;
            min-width: 900px;
            max-width: 900px;
        }

        .commodity-td-left-0 {
            left: 0;
        }
        .commodity-td-left-1 {
            left: 50px;
        }
        .commodity-td-left-2 {
            left: 100px;
        }
        .commodity-td-left-3 {
            left: 180px;
        }
        .commodity-td-left-4 {
            left: 250px;
        }
        .commodity-td-left-5 {
            left: 450px;
        }
        .commodity-td-left-6 {
            left: 520px;
        }
        .commodity-td-left-7 {
            left: 620px;
        }
        .commodity-td-left-8 {
            left: 750px;
        }

        .commodity-td-left-9 {
            left: 870px;
        }

        .sticky-col {
            padding: 0 !important;
            position: sticky;
            position: -webkit-sticky;
        }

        .title-th {
            z-index: 2 !important;
        }

        .text-center{
            text-align: center !important;
        }
        .text-right{
            text-align: right !important;
        }

        .purchase_info {
            background-color: #cce0e0 !important;
        }

        .vehicle_info {
            background-color: #ec1b23 !important;
        }

        .prime_info {
            background-color: #00b28b !important;
        }

        .sale_info {
            background-color: #f08300 !important;
        }

        .profit-correct {
            background-color: #e2efda !important;
        }

        .profit-forecast {
            background-color: #fff2cc !important;
        }

        td.non-border {
            border: none !important;
            background-color: white !important;
        }

    </style>
@endsection

@section('page_js')
    <script src="{{ asset('vendor/jquery-ui/i18n/datepicker-ja.js') }}"></script>

    <script>
        $(document).ready(function(){
            $('#btn_search').click(function(e) {
                e.preventDefault();

                if(checkHasSearchCondition()) {
                    $('#frm_search').submit();
                } else {
                    alert('検索条件を入力してください。');
                }
            });

            $('#btn_export_excel').click(function(e) {
                e.preventDefault();

                let checked_records = getCheckRecords();

                if(checked_records != '') {
                    $('#frm_export_excel').html('{{ @csrf_field() }}' + checked_records);
                    $('#frm_export_excel').submit();
                } else if(checkHasSearchCondition()) {
                    $('#frm_export_excel').html('{{ @csrf_field() }}' + $('#frm_search').html());
                    $('#frm_export_excel').submit();
                } else {
                    alert('検索条件を入力してください。');
                }

                $('#frm_export_excel').html('');
            });

            // 1. 「全選択」する
            $('#ch_all').on('click', function() {
                $("input.ch-vehicle").prop('checked', this.checked);
            });
            // 2. 「全選択」以外のチェックボックスがクリックされたら、
            $("input.ch-vehicle").on('click', function() {
                if ($('input.ch-vehicle:checked').length == $('input.ch-vehicle').length) {
                    // 全てのチェックボックスにチェックが入っていたら、「全選択」 = checked
                    $('#ch_all').prop('checked', true);
                } else {
                    // 1つでもチェックが入っていたら、「全選択」 = checked
                    $('#ch_all').prop('checked', false);
                }
            });
        });

        function checkHasSearchCondition(){
            let has_condition = false;
            $('.ele-search').each(function (index, element) {
                if($(element).val() != '') {
                    has_condition = true;
                }
            });
            return has_condition;
        }

        function getCheckRecords(){
            let html_elements = '';
            $('input.ch-vehicle:checked').each(function (index, element) {
                $(element).attr('checked','checked');
                html_elements += element.outerHTML;
            });
            return html_elements;
        }
    </script>
@endsection