@extends('_layouts.app', [
    "title" => "Buat Pengiriman Baru",
    "is_dashboard" => false
])

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-lg-12" style="margin-top: 50px;">
                <form id="submit">
                    <div class="card">
                        <div class="card-header bg-primary" data-bs-toggle="collapse" data-bs-target="#sender">
                            <h6 class="card-title text-white">Data Pengirim</h6>
                        </div>
                        <div class="card-body collapse show" id="sender">
                            <div class="row">
                                <div class="col-lg-4 mb-3">
                                    <div class="form-group">
                                        <label for="sender_name" class="form-label">Nama</label>
                                        <input type="text" name="sender_name" id="sender_name" class="form-control sender_name" autocomplete="off" placeholder="Nama">
                                        <small class="text-danger error" id="error-sender_name"></small>
                                    </div>
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <div class="form-group">
                                        <label for="sender_email" class="form-label">Email</label>
                                        <input type="text" name="sender_email" id="sender_email" class="form-control sender_email" autocomplete="off" placeholder="Email">
                                        <small class="text-danger error" id="error-sender_email"></small>
                                    </div>
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <div class="form-group">
                                        <label for="sender_phone" class="form-label">No. HP</label>
                                        <div class="input-group">
                                            <span class="input-group-text">+62</span>
                                            <input type="number" name="sender_phone" id="sender_phone" class="form-control sender_phone" autocomplete="off" placeholder="No. HP Pengirim">
                                        </div>
                                        <small class="text-danger error" id="error-sender_phone"></small>
                                    </div>
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <div class="form-group">
                                        <label for="sender_province_id" class="form-label">Provinsi</label>
                                        <select name="sender_province_id" id="sender_province_id" class="form-control sender_province_id">
                                            <option value="">Provinsi</option>
                                        </select>
                                        <small class="text-danger error" id="error-sender_province_id"></small>
                                    </div>
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <div class="form-group">
                                        <label for="sender_city_id" class="form-label">Kabupaten/Kota</label>
                                        <select name="sender_city_id" id="sender_city_id" class="form-control sender_city_id">
                                            <option value="">Kabupaten/Kota</option>
                                        </select>
                                        <small class="text-danger error" id="error-sender_city_id"></small>
                                    </div>
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <div class="form-group">
                                        <label for="sender_subdistrict_id" class="form-label">Kecamatan</label>
                                        <select name="sender_subdistrict_id" id="sender_subdistrict_id" class="form-control sender_subdistrict_id">
                                            <option value="">Kecamatan</option>
                                        </select>
                                        <small class="text-danger error" id="error-sender_subdistrict_id"></small>
                                    </div>
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <div class="form-group">
                                        <label for="sender_address" class="form-label">Alamat</label>
                                        <textarea name="sender_address" id="sender_address" rows="4" class="form-control sender_address" autocomplete="off" placeholder="Alamat"></textarea>
                                        <small class="text-danger error" id="error-sender_address"></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-header bg-primary" data-bs-toggle="collapse" data-bs-target="#receipient">
                            <h6 class="card-title text-white">Data Penerima</h6>
                        </div>
                        <div class="card-body collapse show" id="receipient">
                            <div class="row">
                                <div class="col-lg-6 mb-3">
                                    <div class="form-group">
                                        <label for="recipient_name" class="form-label">Nama</label>
                                        <input type="text" name="recipient_name" id="recipient_name" class="form-control recipient_name" autocomplete="off" placeholder="Nama">
                                        <small class="text-danger error" id="error-recipient_name"></small>
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <div class="form-group">
                                        <label for="recipient_phone" class="form-label">No. HP</label>
                                        <div class="input-group">
                                            <span class="input-group-text">+62</span>
                                            <input type="number" name="recipient_phone" id="recipient_phone" class="form-control recipient_phone" autocomplete="off" placeholder="No. HP">
                                        </div>
                                        <small class="text-danger error" id="error-recipient_phone"></small>
                                    </div>
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <div class="form-group">
                                        <label for="recipient_province_id" class="form-label">Provinsi</label>
                                        <select name="recipient_province_id" id="recipient_province_id" class="form-control recipient_province_id">
                                            <option value="">Provinsi</option>
                                        </select>
                                        <small class="text-danger error" id="error-recipient_province_id"></small>
                                    </div>
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <div class="form-group">
                                        <label for="recipient_city_id" class="form-label">Kabupaten/Kota</label>
                                        <select name="recipient_city_id" id="recipient_city_id" class="form-control recipient_city_id">
                                            <option value="">Kabupaten/Kota</option>
                                        </select>
                                        <small class="text-danger error" id="error-recipient_city_id"></small>
                                    </div>
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <div class="form-group">
                                        <label for="recipient_subdistrict_id" class="form-label">Kecamatan</label>
                                        <select name="recipient_subdistrict_id" id="recipient_subdistrict_id" class="form-control recipient_subdistrict_id">
                                            <option value="">Kecamatan</option>
                                        </select>
                                        <small class="text-danger error" id="error-recipient_subdistrict_id"></small>
                                    </div>
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <div class="form-group">
                                        <label for="recipient_address" class="form-label">Alamat</label>
                                        <textarea name="recipient_address" id="recipient_address" rows="4" class="form-control recipient_address" autocomplete="off" placeholder="Alamat"></textarea>
                                        <small class="text-danger error" id="error-recipient_address"></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-header bg-primary" data-bs-toggle="collapse" data-bs-target="#post">
                            <h6 class="card-title text-white">Data Pengiriman</h6>
                        </div>
                        <div class="card-body collapse show" id="post">
                            <div class="row">
                                <div class="col-lg-12 mb-3">
                                    <div class="form-group">
                                        <label for="name" class="form-label">Nama Paket</label>
                                        <input type="text" name="name" id="name" class="form-control name" autocomplete="off" placeholder="Nama Paket" />
                                        <small class="text-danger error" id="error-name"></small>
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <div class="form-group">
                                        <label for="amount" class="form-label">Jumlah Barang</label>
                                        <input type="number" name="amount" id="amount" class="form-control amount" autocomplete="off" placeholder="Jumlah Barang">
                                        <small class="text-danger error" id="error-amount"></small>
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <div class="form-group">
                                        <label for="coli_count" class="form-label">Jumlah Koli</label>
                                        <input type="number" name="coli_count" id="coli_count" class="form-control coli_count" autocomplete="off" placeholder="Jumlah Koli">
                                        <small class="text-danger error" id="error-coli_count"></small>
                                    </div>
                                </div>
                                <div class="col-lg-col-lg-12 mb-3">
                                    <div class="form-group">
                                        <label for="volume" class="form-label">Volume</label>
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="input-group">
                                                    <input type="number" name="length" id="length" class="form-control length" autocomplete="off" placeholder="Panjang">
                                                    <span class="input-group-text">Cm</span>
                                                </div>
                                                <small class="text-danger error" id="error-length"></small>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="input-group">
                                                    <input type="number" name="width" id="width" class="form-control width" autocomplete="off" placeholder="Lebar">
                                                    <span class="input-group-text">Cm</span>
                                                </div>
                                                <small class="text-danger error" id="error-width"></small>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="input-group">
                                                    <input type="number" name="height" id="height" class="form-control height" autocomplete="off" placeholder="Tinggi">
                                                    <span class="input-group-text">Cm</span>
                                                </div>
                                                <small class="text-danger error" id="error-height"></small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <div class="form-group">
                                        <label for="weight" class="form-label">Berat Barang</label>
                                        <div class="input-group">
                                            <input type="text" name="weight" id="weight" class="form-control weight" autocomplete="off" placeholder="Berat Barang">
                                            <span class="input-group-text">Kg</span>
                                        </div>
                                        <samll class="text-danger error" id="error-weight"></samll>
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <div class="form-group">
                                        <label for="insurance" class="form-label">Asuransi</label>
                                        <div class="input-group">
                                            <span class="input-group-text">IDR</span>
                                            <input type="text" name="insurance" id="insurance" class="form-control insurance" autocomplete="off" placeholder="Asuransi">
                                        </div>
                                        <samll class="text-danger error" id="error-insurance"></samll>
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <div class="form-group">
                                        <label for="service_id" class="form-label">Layanan</label>
                                        <select name="service_id" id="service_id" class="form-control service_id">
                                            <option value="">Layanan</option>
                                        </select>
                                        <small class="text-danger error" id="error-service_id"></small>
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <div class="form-group">
                                        <label for="payment_id" class="form-label">Pembayaran</label>
                                        <select name="payment_id" id="payment_id" class="form-control payment_id">
                                            <option value="">Pembayaran</option>
                                        </select>
                                        <small class="text-danger error" id="error-payment_id"></small>
                                    </div>
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <div class="form-group">
                                        <label for="note" class="form-label">Catatan</label>
                                        <textarea name="note" id="note" rows="4" class="form-control note" autocomplete="off" placeholder="Catatan"></textarea>
                                        <small class="text-danger error" id="error-note"></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-header bg-primary" data-bs-toggle="collapse" data-bs-target="#logistics">
                            <h6 class="card-title text-white">Data Logistik</h6>
                        </div>
                        <div class="card-body collapse show" id="logistics">
                            <div class="row">
                                <div class="col-lg-12 mb-3">
                                    <div class="form-group">
                                        <label for="logistics_id" class="form-label">Logistik</label>
                                        <select name="logistics_id" id="logistics_id" class="form-control logistics_id">
                                            <option value="">Logistik</option>
                                        </select>
                                        <small class="text-danger error" id="error-logistics_id"></small>
                                    </div>
                                </div>
                                <div class="col-lg-12 mb-3" id="output_cost"></div>
                            </div>
                        </div>
                        <div class="card-footer d-flex justify-content-end gap-2">
                            <a href="{{ route("home") }}" class="btn btn-light">Batal</a>
                            <button type="submit" class="btn btn-primary">Simpan</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script type="text/javascript">
        class Delivery extends App {
            constructor() {
                super()
            }

            _logistics() {
                let city_id = $(`form#submit [name=sender_city_id]`).val()

                console.log(city_id)

                this.apiSelect2({
                    url: `/api/logistics/select2?city_id=${ city_id }`,
                    element: `form#submit [name=logistics_id]`
                })
            }

            _service() {
                this.apiSelect2({
                    url: `/api/service`,
                    element: `form#submit [name=service_id]`
                })
            }

            _payment() {
                this.apiSelect2({
                    url: `/api/payment`,
                    element: `form#submit [name=payment_id]`
                })
            }

            submit(e) {
                e.preventDefault()

                let formData = this.formData(`form#submit`)

                $(`form#submit input, form#submit select, form#submit button, form#submit textarea`).prop(`disabled`, true)

                this.api({
                    url: `/api/delivery/new`,
                    method: `POST`,
                    data: formData,
                    success: e => {
                        $(`form#submit .error`).html(``)

                        Swal.fire({
                            title: `Berhasil`,
                            text: `Data berhasil disimpan!`,
                            icon: 'success',
                            showCancelButton: false,
                            confirmButtonText: 'Ok',
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location="{{ route("delivery") }}"
                            }
                        })
                    },
                    error: err => {
                        let error = err.message

                        $(`form#submit .error`).html(``)

                        $.each(error, function (index, value) {
                            $(`form#submit .error#error-${ index }`).html(value)
                        })

                        $(`form#submit input, form#submit select, form#submit button, form#submit textarea`).prop(`disabled`, false)
                    }
                })
            }

            cost() {
                let from_subdistrict_id = $(`form#submit [name=sender_subdistrict_id]`).val()
                let to_subdistrict_id = $(`form#submit [name=recipient_subdistrict_id]`).val()
                let weight = $(`form#submit [name=weight]`).val()
                let length = $(`form#submit [name=length]`).val()
                let width = $(`form#submit [name=width]`).val()
                let height = $(`form#submit [name=height]`).val()
                let logistics_id = $(`form#submit [name=logistics_id]`).val()

                $(`form#submit #output_cost`).html(``)

                this.api({
                    url: `/api/delivery/cost`,
                    method: `POST`,
                    data: {
                        from_subdistrict_id: from_subdistrict_id,
                        to_subdistrict_id: to_subdistrict_id,
                        weight: weight,
                        length: length,
                        width: width,
                        height: height,
                        logistics_id: logistics_id
                    },
                    success: e => {
                        let data = e.data
                        let output = ``

                        $.each(data, function (index, value) {
                            output += `
                                <input type="radio" class="btn-check" name="service" value="${ value.service }" id="service_${ value.service }">
                                <label class="btn btn-outline-primary w-100" for="service_${ value.service }">
                                    <div class="row">
                                        <div class="col-lg-4" style="text-align: left !important;">
                                            <b>${ value.code }</b><br />
                                            <small>${ value.name }</small>
                                        </div>
                                        <div class="col-lg-4" style="text-align: left !important;">
                                            <b>${ value.service }</b><br />
                                            <small>${ value.description }</small>
                                        </div>
                                        <div class="col-lg-4 d-flex align-items-center justify-content-center">
                                            <b>${ value.cost.value }</b>
                                        </div>
                                    </div>
                                </label>
                            `
                        })

                        $(`form#submit #output_cost`).html(`
                            <div class="hstack gap-2 flex-column">
                                ${ output }
                            </div>
                        `)
                    },
                    error: err => {
                        let error = err.message

                        if (error.constructor === Object) {
                            let output = `<div class="alert alert-danger">`
                            $.each(error, function (index, value) {
                                output += `${ value }<br />`
                            })
                            output += `</div>`

                            $(`form#submit #output_cost`).html(output)
                        }
                    }
                })
            }
        }

        var delivery = new Delivery

        delivery._logistics()

        $(document).on(`change`, `form#submit [name=sender_city_id]`, function() {
            delivery._logistics()
        })

        delivery._service()
        delivery._payment()

        $(document).on(`submit`, `form#submit`, function(e) {
            delivery.submit(e)
        })

        $(document).on(`change`, `form#submit [name=logistics_id]`, function() {
            delivery.cost()
        })

        $(document).on(`change`, `form#submit [name=sender_province_id], form#submit [name=sender_city_id], form#submit [name=recipient_subdistrict_id], form#submit [name=recipient_province_id], form#submit [name=recipient_city_id], form#submit [name=sender_subdistrict_id]`, function() {
            $(`form#submit #output_cost`).html(``)
        })

        $(document).on(`keyup`, `form#submit [name=length], form#submit [name=width], form#submit [name=height], form#submit [name=weight]`, function() {
            $(`form#submit #output_cost`).html(``)
        })
    </script>

    <script type="text/javascript">
        class Sender extends App {
            constructor() {
                super()
            }

            _province() {
                this.apiSelect2({
                    url: `/api/location/province`,
                    element: `form#submit [name=sender_province_id]`
                })
            }

            _city(province_id) {
                this.apiSelect2({
                    url: `/api/location/city?province_id=${ province_id }`,
                    element: `form#submit [name=sender_city_id]`
                })
            }

            _subdistrict(city_id) {
                this.apiSelect2({
                    url: `/api/location/subdistrict?city_id=${ city_id }`,
                    element: `form#submit [name=sender_subdistrict_id]`
                })
            }
        }

        var sender = new Sender

        sender._province()

        $(document).on(`change`, `form#submit [name=sender_province_id]`, function() {
            let id = $(this).val()

            sender._city(id)
        })

        $(document).on(`change`, `form#submit [name=sender_city_id]`, function() {
            let id = $(this).val()

            sender._subdistrict(id)
        })
    </script>

    <script type="text/javascript">
        class Recipient extends App {
            constructor() {
                super()
            }

            _province() {
                this.apiSelect2({
                    url: `/api/location/province`,
                    element: `form#submit [name=recipient_province_id]`
                })
            }

            _city(province_id) {
                this.apiSelect2({
                    url: `/api/location/city?province_id=${ province_id }`,
                    element: `form#submit [name=recipient_city_id]`
                })
            }

            _subdistrict(city_id) {
                this.apiSelect2({
                    url: `/api/location/subdistrict?city_id=${ city_id }`,
                    element: `form#submit [name=recipient_subdistrict_id]`
                })
            }
        }

        var recipient = new Recipient

        recipient._province()

        $(document).on(`change`, `form#submit [name=recipient_province_id]`, function() {
            let id = $(this).val()

            recipient._city(id)
        })

        $(document).on(`change`, `form#submit [name=recipient_city_id]`, function() {
            let id = $(this).val()

            recipient._subdistrict(id)
        })
    </script>
@endsection