@extends('layout')

@section('content')

<div class="page-header page-header-light">
    <div class="page-header-content header-elements-md-inline">
        <div class="page-title d-flex">
            <h3 class="font-weight-bold"><span class="font-weight-light">LOADING PLAN TRACKING -</span> Create</h3>
            <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
        </div>
    </div>
</div>

<div class="content">
    <div class="card">
        <div class="card-header header-elements-inline">
            <h5 class="card-title mb-0">Remaining CBM by Tipe Ekspedisi</h5>
            <div class="header-elements">
                <button
                    type="button"
                    class="btn btn-light btn-icon"
                    data-toggle="collapse"
                    data-target="#remaining-cbm-card-body"
                    aria-expanded="true"
                    aria-controls="remaining-cbm-card-body"
                >
                    <i class="icon-minus3"></i>
                </button>
            </div>
        </div>

        <div id="remaining-cbm-card-body" class="collapse show">
            <div class="card-body">
                @if($remainingCbmByGudang->isEmpty())
                    <div class="alert alert-info mb-0">
                        Tidak ada remaining CBM dari receipt yang tersedia.
                    </div>
                @else
                    @foreach($remainingCbmByGudang as $gudang => $remainingCbmItems)
                        <div class="{{ !$loop->last ? 'mb-4' : '' }}">
                            <h6 class="font-weight-semibold mb-2">Gudang Receipt: {{ $gudang }}</h6>
                            <div class="table-responsive">
                                <table class="table table-sm table-bordered mb-0">
                                    <thead>
                                        <tr>
                                            <th style="width: 60px;">No</th>
                                            <th>Tipe Ekspedisi</th>
                                            <th style="width: 180px;">Remaining CBM</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($remainingCbmItems as $remainingCbm)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>
                                                    <div>{{ $remainingCbm->category }}</div>
                                                    @if($gudang === '-' && $remainingCbm->receipts->isNotEmpty())
                                                        <div class="mt-1 small">
                                                            @foreach($remainingCbm->receipts as $receipt)
                                                                <a
                                                                    href="{{ route('receipt.edit', $receipt->id) }}"
                                                                    target="_blank"
                                                                    class="mr-2"
                                                                >
                                                                    {{ $receipt->no_resi }}
                                                                </a>
                                                            @endforeach
                                                        </div>
                                                    @endif
                                                </td>
                                                <td>{{ $remainingCbm->total_cbm }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header header-elements-inline">
            <h5 class="card-title mb-0">New Loading Plan Tracking</h5>
        </div>

        <div class="card-body">
            <form action="{{ route('loadingplantracking.store') }}" method="post">
                @csrf
                <div class="form-group row">
                    <label class="col-form-label col-lg-2">Gudang</label>
                    <div class="col-lg-6">
                        <select
                            name="gudang"
                            id="gudang"
                            class="form-control form-control-select2"
                            data-container-css-class="border-teal"
                            data-dropdown-css-class="border-teal"
                        >
                            @if (\Auth::user()->id == 2688 || \Auth::user()->id == 16267)
                                @foreach(config('custom.alamat_gudangs') as $gudang)
                                    <option value="{{ $gudang }}" {{ old('gudang', $gudang == 'Yiwu' ? 'Yiwu' : null) == $gudang ? 'selected' : '' }}>{{ $gudang }}</option>
                                @endforeach
                            @else
                                @foreach(config('custom.alamat_gudangs') as $gudang)
                                    <option value="{{ $gudang }}" {{ old('gudang', $gudang == 'Guangzhou' ? 'Guangzhou' : null) == $gudang ? 'selected' : '' }}>{{ $gudang }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-form-label col-lg-2">Jalur</label>
                    <div class="col-lg-6">
                        <select
                            name="shipping_to"
                            id="shipping_to"
                            class="form-control form-control-select2"
                            data-container-css-class="border-teal"
                            data-dropdown-css-class="border-teal"
                        >
                            @foreach($shipping as $ship)
                                <option value="{{ $ship->kode }}" {{ old('shipping_to', $ship->kode == '(Direct)' ? '(Direct)' : null) == $ship->kode ? 'selected' : '' }}>{{ $ship->kode }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-form-label col-lg-2">Detail Loading Plan</label>
                    <div class="col-lg-10">
                        <div class="row mb-2 font-weight-semibold">
                            <div class="col-lg-6">Kategori</div>
                            <div class="col-lg-4">CBM</div>
                            <div class="col-lg-2 text-center">Action</div>
                        </div>

                        @php
                            $oldTipeEkspedisi = old('tipe_ekspedisi', [null]);
                            $oldCbm = old('cbm', [null]);
                            $detailRowCount = max(count($oldTipeEkspedisi), count($oldCbm), 1);
                        @endphp

                        <div id="detail-loading-plan-wrapper">
                            @for($i = 0; $i < $detailRowCount; $i++)
                                <div class="row align-items-center detail-loading-plan-row mb-3">
                                    <div class="col-lg-6">
                                        <select
                                            name="tipe_ekspedisi[]"
                                            class="form-control form-control-select2 detail-ekspedisi"
                                            data-container-css-class="border-teal"
                                            data-dropdown-css-class="border-teal"
                                        >
                                            <option value="">-- Pilih Tipe Ekspedisi --</option>
                                            @foreach($ekspedisi as $eksp)
                                                <option value="{{ $eksp->id }}" {{ (string) ($oldTipeEkspedisi[$i] ?? '') === (string) $eksp->id ? 'selected' : '' }}>
                                                    {{ collect([$eksp->tipe_ekspedisi, $eksp->tipe_barang])->filter()->implode(' - ') }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-lg-4">
                                        <input
                                            type="text"
                                            name="cbm[]"
                                            class="form-control"
                                            placeholder="Input cbm"
                                            value="{{ $oldCbm[$i] ?? '' }}"
                                        >
                                    </div>

                                    <div class="col-lg-2 text-center">
                                        <button type="button" class="btn btn-success add-detail-row">
                                            <i class="icon-plus3"></i>
                                        </button>
                                        <button type="button" class="btn btn-danger remove-detail-row">
                                            <i class="icon-minus3"></i>
                                        </button>
                                    </div>
                                </div>
                            @endfor
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-form-label col-lg-2">Berat Container</label>
                    <div class="col-lg-6">
                        <input
                            type="number"
                            name="berat_container"
                            class="form-control"
                            placeholder="Input berat container"
                            step="0.001"
                            min="0"
                            value="{{ old('berat_container') }}"
                        >
                    </div>
                </div>

                <div class="d-flex justify-content-between">
                    <a href="{{ route('loadingplantracking.index') }}" class="btn btn-light">Back</a>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
<script src="{{asset('assets/js/app.js')}}"></script>
<script>
    function initSelect2(scope) {
        $(scope).find('.form-control-select2').select2();
    }

    function buildDetailRow() {
        return `
            <div class="row align-items-center detail-loading-plan-row mb-3">
                <div class="col-lg-6">
                    <select
                        name="tipe_ekspedisi[]"
                        class="form-control form-control-select2 detail-ekspedisi"
                        data-container-css-class="border-teal"
                        data-dropdown-css-class="border-teal"
                    >
                        <option value="">-- Pilih Tipe Ekspedisi --</option>
                        @foreach($ekspedisi as $eksp)
                            <option value="{{ $eksp->id }}">{{ collect([$eksp->tipe_ekspedisi, $eksp->tipe_barang])->filter()->implode(' - ') }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-lg-4">
                    <input
                        type="text"
                        name="cbm[]"
                        class="form-control"
                        placeholder="Input cbm"
                    >
                </div>

                <div class="col-lg-2 text-center">
                    <button type="button" class="btn btn-success add-detail-row">
                        <i class="icon-plus3"></i>
                    </button>
                    <button type="button" class="btn btn-danger remove-detail-row">
                        <i class="icon-minus3"></i>
                    </button>
                </div>
            </div>
        `;
    }

    $(document).ready(function() {
        initSelect2(document);

        $('#remaining-cbm-card-body')
            .on('shown.bs.collapse', function() {
                $('[data-target="#remaining-cbm-card-body"] i')
                    .removeClass('icon-plus3')
                    .addClass('icon-minus3');
            })
            .on('hidden.bs.collapse', function() {
                $('[data-target="#remaining-cbm-card-body"] i')
                    .removeClass('icon-minus3')
                    .addClass('icon-plus3');
            });

        $(document).on('click', '.add-detail-row', function() {
            $('#detail-loading-plan-wrapper').append(buildDetailRow());
            initSelect2($('#detail-loading-plan-wrapper .detail-loading-plan-row').last());
        });

        $(document).on('click', '.remove-detail-row', function() {
            if ($('.detail-loading-plan-row').length === 1) {
                $(this).closest('.detail-loading-plan-row').find('select').val('').trigger('change');
                $(this).closest('.detail-loading-plan-row').find('input').val('');
                return;
            }

            $(this).closest('.detail-loading-plan-row').remove();
        });

        @if ($errors->any())
            new PNotify({
                title: 'Error',
                text: '{{ $errors->first() }}',
                icon: 'icon-blocked',
                type: 'error'
            });
        @endif

        @if (session('success'))
            new PNotify({
                title: 'Success',
                text: '{{ session('success') }}',
                icon: 'icon-checkmark3',
                type: 'success'
            });
        @endif

        @if (session('error'))
            new PNotify({
                title: 'Error',
                text: '{{ session('error') }}',
                icon: 'icon-blocked',
                type: 'error'
            });
        @endif
    });
</script>
@endsection