@extends('app.app')
@section('title')
    Transactions Special
@endsection
@section('content')
    <div class="container-fluid">
        <div class="content">
            <form action="{{ url('api/transactions_spc/create_order_v1') }}" method="POST">
                @csrf
                {{-- template pickup and drop --}}
                <div class="row">
                    <div class="col-lg-6 col-md-8 col-sm-8">
                        <div class="card">
                            <div class="card-header">
                                <div class="row d-flex align-items-center">
                                    <div class="col">
                                        <p class="card-title text-bold mb-0">Tambah Pengiriman Baru</p>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                {{-- client --}}
                                <div class="row mb-3 d-flex align-items-center">
                                    <div class="col-12 mb-3">
                                        <div class="mb-3">
                                            <p class="text-danger text-bold mb-0">Tanggal dan Waktu Pengiriman</p>
                                            <small>Masukkan tanggal, jam, lokasi penjemputan, dan lokasi pengantaran yang ada pada daftar zona yang telah didaftarkan</small>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-5 col-5">
                                                <label class="form-label text-nowrap">Tanggal Penjemputan <span class="text-danger">*</span></label>
                                                <input type="date" name="add_pickup_date" class="form-control" required>
                                            </div>
                                            <div class="col-2"></div>
                                            <div class="col-sm-5 col-5">
                                                <label for="add_pickup_time" class="form-label text-nowrap">Waktu Penjemputan <span class="text-danger">*</span></label>
                                                <div class="row">
                                                    <div class="col-md-4 col-lg-3" style="padding:0 0 0 0.75rem;">
                                                        <select name="add_pickup_time_hour" class="form-control" required>
                                                            <option value="" selected disabled hidden>--</option>
                                                            @for ($i = 0; $i < 24; $i++)
                                                                <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</option>
                                                            @endfor
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4 col-lg-3" style="padding:0 0 0 0.75rem;">
                                                        <select name="add_pickup_time_minute" class="form-control" required>
                                                            <option value="" selected disabled hidden>--</option>
                                                            @for ($i = 0; $i < 60; $i++)
                                                                <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</option>
                                                            @endfor
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-5 col-5 mb-3 d-none">
                                        <label for="add_client" class="form-label text-nowrap">Pilih Client <span class="text-danger">*</span></label>
                                        <select name="add_client" id="add_client" class="select2 form-control" readonly>
                                            @foreach ($uclients as $uclient)
                                                <option value="{{ $uclient->id }}" data-uid="{{ $uclient->id }}" data-cptid="{{ $uclient->client_group_id }}">
                                                    {{ $uclient->first_name . " ($uclient->client_group_name)" }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="card bg-light">
                                    <div class="card-header">
                                        <div class="row d-flex align-items-center">
                                            <div class="col">
                                                <p class="card-title text-bold mb-0">Penjemputan dan Pengantaran</p>
                                                <small>Masukkan lokasi penjemputan, dan lokasi pengantaran yang ada pada daftar zona yang telah didaftarkan</small>
                                            </div>
                                            <div class="col text-end">
                                                <button id="point-add-row" type="button" class="btn btn-sm btn-danger list_add_button">
                                                    <span class="ion-plus"></span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="point-container" class="card-body pb-0">
                                        {{-- add here --}}
                                        <div id="templatePickDrop" class="">
                                            <div class="card point-card" data-id="0">
                                                <div class="card-body">
                                                    <div class="row mb-3 d-flex align-items-center">
                                                        <div class="col-12">
                                                            <p class="text-danger text-bold mb-0">Penjemputan dan Pengantaran <span class="point-rowno"></span> <span class="text-danger">*</span></p>
                                                        </div>
                                                        {{-- <div class="col-2 text-end">
                                                            <button class="btn btn-sm btn-secondary point-minus list_remove_button" type="button">
                                                                <span class="ion-minus"></span>
                                                            </button>
                                                        </div> --}}
                                                    </div>
                                                    <div class="row d-flex align-items-center">
                                                        <div class="col-5">
                                                            <div class="form-group mb-2">
                                                                <label for="add_pickup_zone" class="form-label">Lokasi Penjemputan <span class="text-danger">*</span></label>
                                                                <select id="addPickupZone" name="add_pickup_zone[]" class="form-control select2" required>
                                                                    <option value="" disabled selected>Belum ada lokasi yang dipilih</option>
                                                                    @foreach ($pickup_zone as $_pickup_zone)
                                                                        <option value="{{ $_pickup_zone->id }}">{{ $_pickup_zone->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="form-group mb-2">
                                                                <label for="add_pickup_pic_name" class="form-label text-nowrap">Nama Pengirim <span class="text-danger">*</span></label>
                                                                <input type="text" name="add_pickup_pic_name[]" id="addPickupPicName" class="form-control" required>
                                                            </div>
                                                            <div class="form-group mb-2">
                                                                <label for="add_pickup_pic_phone" class="form-label text-nowrap">No Telepon Pengirim <span class="text-danger">*</span></label>
                                                                <input type="tel" name="add_pickup_pic_phone[]" pattern="[0-9]*" title="Please enter a valid phone number (digits only)." id="addPickupPicPhone" class="form-control" required>

                                                            </div>
                                                        </div>
                                                        <div class="col-2 text-center">
                                                            <label for="" class="form-label mb-0 mt-2">&nbsp;</label>
                                                            <span class="ion-arrow-right-c text-danger" style="font-size: 15px"></span>
                                                        </div>
                                                        <div class="col-5">
                                                            <div class="form-group mb-2">
                                                                <label for="add_drop_zone" class="form-label">Lokasi Pengantaran <span class="text-danger">*</span></label>
                                                                <select name="add_drop_zone[]" class="form-control select2" required>
                                                                    <option value="" selected disabled>Belum ada lokasi yang dipilih</option>
                                                                    @foreach ($drop_zone as $_drop_zone)
                                                                        <option value="{{ $_drop_zone->id }}">{{ $_drop_zone->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="form-group mb-2">
                                                                <label for="add_drop_pic_name" class="form-label text-nowrap">Nama Penerima <span class="text-danger">*</span></label>
                                                                <input type="text" name="add_drop_pic_name[]" class="form-control" required>
                                                            </div>
                                                            <div class="form-group mb-2">
                                                                <label for="add_drop_pic_phone" class="form-label text-nowrap">No Telepon Penerima <span class="text-danger">*</span></label>
                                                                <input type="tel" name="add_drop_pic_phone[]" pattern="[0-9]*" title="Please enter a valid phone number (digits only)." class="form-control" required>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row d-flex mt-2 select-report">
                                                        <div class="col-sm-12">
                                                            <label for="add_pickup_zone" class="form-label">Foto Pelaporan</label>
                                                            <select class="select2 form-control" id="addChecklist" name="checklist[0][]" style="width: 100%" multiple>
                                                                @foreach ($checklist as $_checklist)
                                                                    <option value="{{ $_checklist->id }}">{{ $_checklist->name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- prefer type vehicle --}}
                                <div class="row d-flex align-items-center">
                                    <div class="col-12 mb-3">
                                        <p class="text-danger text-bold mb-0">Informasi Kendaraan & Pengemudi</p>
                                    </div>
                                    <div class="col-5 mb-3">
                                        <label for="add-truck_type" class="form-label">Pilih Kendaraan <span class="text-danger">*</span></label>
                                        <select name="id_kendaraan" class="form-control" class="select2">
                                            <option value="">Pilih Kendaraan</option>
                                            @foreach ($vehicles as $_vehicle)
                                                <option value="{{ $_vehicle->id }}">{{ $_vehicle->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-sm-2"></div>
                                    <div class="col-5 mb-3">
                                        <label for="add-truck_type" class="form-label">Pilih Pengemudi <span class="text-danger">*</span></label>
                                        <select name="id_pengemudi" class="form-control" class="select2">
                                            <option value="">Pilih Pengemudi</option>
                                            @foreach ($drivers as $_driver)
                                                <option value="{{ $_driver->id }}">{{ $_driver->fullname . ' (+62 ' . $_driver->phone . ')' }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-12">
                                        <label for="add-note_tonase" class="form-label">Catatan Tonase</label>
                                        <input type="text" name="add-note_tonase" id="add-note_tonase" class="form-control" placeholder="Tonase: 22 Ton / 58CBM">
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="row d-flex align-items-center">
                                    <div class="col-8">
                                        <p class="mb-0">
                                            Sudahkah Anda mengisi semua kolom yang ada?
                                        </p>
                                    </div>
                                    <div class="col-4 text-end">
                                        {{-- <button class="btn btn-warning btn-block btn-sm" id="btnCalculate">Pesan Sekarang</button> --}}
                                        <button class="btn btn-warning btn-block btn-sm" type="submit">Pesan Sekarang</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('customcss')
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
@endsection
@section('customjs')
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
    <script>
        $(document).ready(function() {
            $('#add_client').val('{{ Auth::user()->id }}').change();
            var x = 1; //Initial field counter
            var list_maxField = 10; //Input fields increment limitation

            let index = 1;

            function initializeSelect2(selector) {
                $('.select2').select2();
            }

            initializeSelect2('#options0');

            function updateIndices() {
                $('#templatePickDrop .select-report').each(function(i) {
                    $(this).find('.select').attr('name', `checklist[${i}][]`);
                    $(this).find('.select').attr('id', `options${i}`);
                });
                index = $('#templatePickDrop .select-report').length;
            }
            //Once add button is clicked
            $('body').on('click', '#point-add-row', function() {
                //Check maximum number of input fields
                x++;
                if (x < list_maxField) {
                    var list_fieldHTML = `
                        <div class="card point-card" data-id="0">
                            <div class="card-body">
                                <div class="row mb-3 d-flex align-items-center">
                                    <div class="col-10 mb-3">
                                        <p class="text-danger text-bold mb-0">Penjemputan dan Pengantaran <span class="point-rowno"></span> <span class="text-danger">*</span></p>
                                    </div>
                                    <div class="col-2 text-end">
                                        <button class="btn btn-sm btn-secondary point-minus list_remove_button" type="button">
                                            <span class="ion-minus"></span>
                                        </button>
                                    </div>
                                </div>
                                <div class="row d-flex align-items-center">
                                    <div class="col-5">
                                        <div class="form-group mb-2">
                                            <label for="add_pickup_zone" class="form-label">Lokasi Penjemputan <span class="text-danger">*</span></label>
                                            <select name="add_pickup_zone[]" class="form-control select2pckup" required>
                                                <option value="" selected disabled>Belum ada lokasi yang dipilih</option>
                                                @foreach ($pickup_zone as $_pickup_zone)
                                                    <option value="{{ $_pickup_zone->id }}">{{ $_pickup_zone->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group mb-2">
                                            <label for="add_pickup_pic_name" class="form-label text-nowrap">Nama Pengirim <span class="text-danger">*</span></label>
                                            <input type="text" name="add_pickup_pic_name[]" class="form-control add-pckup-pic-name" required readonly>
                                        </div>
                                        <div class="form-group mb-2">
                                            <label for="add_pickup_pic_phone" class="form-label text-nowrap">No Telepon Pengirim <span class="text-danger">*</span></label>
                                            <input type="tel" name="add_pickup_pic_phone[]" pattern="[0-9]*" title="Please enter a valid phone number (digits only)." class="form-control add-pckup-pic-phone" required  readonly>
                                        </div>
                                    </div>
                                    <div class="col-2 text-center">
                                        <label for="" class="form-label mb-0 mt-2">&nbsp;</label>
                                        <span class="ion-arrow-right-c text-danger" style="font-size: 15px"></span>
                                    </div>
                                    <div class="col-5">
                                        <div class="form-group mb-2">
                                            <label for="add_drop_zone" class="form-label">Lokasi Pengantaran <span class="text-danger">*</span></label>
                                            <select name="add_drop_zone[]" class="select2 form-control" required>
                                                <option value="" selected disabled>Belum ada lokasi yang dipilih</option>
                                                @foreach ($drop_zone as $_drop_zone)
                                                    <option value="{{ $_drop_zone->id }}">{{ $_drop_zone->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group mb-2">
                                            <label for="add_drop_pic_name" class="form-label text-nowrap">Nama Penerima <span class="text-danger">*</span></label>
                                            <input type="text" name="add_drop_pic_name[]" class="form-control" required>
                                        </div>
                                        <div class="form-group mb-2">
                                            <label for="add_drop_pic_phone" class="form-label text-nowrap">No Telepon Penerima <span class="text-danger">*</span></label>
                                            <input type="tel" name="add_drop_pic_phone[]" pattern="[0-9]*" title="Please enter a valid phone number (digits only)." class="form-control" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row d-flex mt-2 select-report">
                                    <div class="col-sm-12">
                                        <label for="add_pickup_zone" class="form-label">Foto Pelaporan</label>
                                        <select class="select2 select2checklist form-control" name="checklist[${index}][]" id="options${index}" style="width: 100%" multiple>
                                            @foreach ($checklist as $_checklist)
                                                <option value="{{ $_checklist->id }}">{{ $_checklist->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `; //New input field html
                    $('#templatePickDrop').append(list_fieldHTML); //Add field html
                    // $("select").select2();
                    // $(".select2pckup").prop('readonly', true);
                    $(".select2pckup").prop('disabled', true);
                    initializeSelect2(`#options${index}`);

                    $('.select2pckup').val($('#addPickupZone').val()).trigger('change')
                    $('.add-pckup-pic-name').val($('#addPickupPicName').val())
                    $('.add-pckup-pic-phone').val($('#addPickupPicPhone').val())


                    $('.select2checklist').prop('disabled', true);
                    $('.select2checklist').val($('#addChecklist').val()).trigger('change')
                    index++;
                }
            });

            //Once remove button is clicked
            $('#templatePickDrop').on('click', '.list_remove_button', function() {
                $(this).closest('div.point-card').remove(); //Remove field html
                updateIndices();
            });

            $('#addPickupZone').on('change', function() {
                console.log($(this).val());
                $('.select2pckup').val($(this).val()).trigger('change')
                $('.add-pckup-pic-name').val($('#addPickupPicName').val())
                $('.add-pckup-pic-phone').val($('#addPickupPicPhone').val())
            })

            $('#addPickupPicName').on('keyup', function() {
                $('.add-pckup-pic-name').val($(this).val())
            });
            $('#addPickupPicPhone').on('keyup', function() {
                $('.add-pckup-pic-phone').val($(this).val())
            });

            $('#addChecklist').on('change', function() {
                $('.select2checklist').val($('#addChecklist').val()).trigger('change')
            })



            jQuery(function($) {
                $('form').bind('submit', function() {
                    $(this).find('.select2pckup').prop('disabled', false);
                    $(this).find('.select2checklist').prop('disabled', false);
                });
            });
        });
    </script>
@endsection