@extends('layout.master')
@section('content')
<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Container-->
    <div class="container-xxl" id="kt_content_container">

        <!--begin::Tables Widget 11-->
        <div class="card mb-5 mb-xl-8" style="padding-bottom:15px;">
            <!--begin::Header-->
            <div class="card-header border-0 pt-3">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bold fs-3 mb-1">Transferler</span>
                    <span class="text-muted mt-1 fw-semibold fs-7">Transfer Sayısı: {{ $transfers->count() }}</span>
                </h3>
                <div class="card-toolbar">
                    <a href="{{ route('transfer.create') }}" class="btn btn-sm btn-primary">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr075.svg-->
                        <span class="svg-icon svg-icon-2">
                            <i class="fa-solid fa-plus"></i>
                        </span>
                        <!--end::Svg Icon--><b>Transfer Oluştur</b>
                    </a>
                </div>
            </div>
            <!--end::Header-->
        </div>
        @include('transfer.partials.list.loading')
        <div class="transfers">
            @foreach($transfers as $transfer)
            @include('transfer.partials.list.item', ['transfer' => $transfer] )
            @endforeach

        </div>
        <form style="display:none" method="post" action="#" enctype="multipart/form-data" id="form_object">
            <input style="display:none" type="hidden" name="_token" value="{{ csrf_token() }}" />
        </form>
    </div>
</div>
<!--end::Content-->
<div class="modal fade" id="transferUpdateModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Transfer Bilgilerini Güncelle</h2>
                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                    <span class="svg-icon svg-icon-1">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                transform="rotate(-45 6 17.3137)" fill="currentColor" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)"
                                fill="currentColor" />
                        </svg>
                    </span>
                </div>
            </div>
            <div class="modal-body">

                <div id="loadingmodalupdate" style="display:none;">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <img src="{{ URL::to('app/media/new/loading_circle.gif') }}">
                        </div>
                    </div>
                </div>

                <div id="transferUpdateModalContent"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
                <button type="button" id="transferUpdateButton" class="btn btn-primary">Bilgileri Güncelle</button>
            </div>

        </div>
    </div>
</div>
@endsection

@section('css')
<!-- Bu sayfaya ait css dosyaları -->
@endsection


@section('js')
<!-- Bu sayfaya ait js dosyaları -->
<script>
//$(".transfers").hide();
//$("#loadingArea").show();

function showTransfers() {
    $("#loadingArea").hide();
    $(".transfers").show();
}
const myTimeout = setTimeout(showTransfers, 1000);

function reloadTransfer(id, result) {
    const el_prev = $(`#t_${id}`).prev();
    const el_parent = $(`#t_${id}`).next();
    const el_instance = $(`#t_${id}`);

    el_prev.length ? el_prev.after(result) : el_parent.length ? el_parent.before(result) :
        el_instance.parent().html(result);
    $('.transfer_item').length > 1 ? el_instance.remove() : '';
}

// transfer confirm
$('.transfers').on('click', '.transfer_confirm', function() {
    //let self = $(this).closest("tr");
    let el = $(this);
    const url = el.data('url');
    const token = '{{ csrf_token() }}';
    const loading_template = $('#loadingtemplate').html();
    $(`#t_${el.data('transfer_id')}`).html(loading_template);
    $.ajax({
        url: url,
        data: {
            'transfer_id': el.data('transfer_id'),
            '_token': token,
        }, //$('#filterForm').serialize(),
        type: 'POST',
        success: function(result) {
            reloadTransfer(el.data('transfer_id'), result);
            toastr.success("{{ __('transfer.meesage.edit.success') }}",
                "{{ __('transfer.meesage.success') }}");
        }
    });

});

// update transfer modal
$('.transfers').on('click', '.updateTransfer', function() {
    $('#transferUpdateModal').modal('show');
    $('#loadingmodalupdate').show();
    let url = $(this).data('url');

    $.ajax({
        url: url,
        type: 'GET',
        success: function(result) {
            $("#transferUpdateModalContent").html(result);
            $('#loadingmodalupdate').hide();
        }
    });
});


// update transfer in modal
$('#transferUpdateModal').on('click', '#transferUpdateButton', function() {
    //let self = $(this).closest("tr");
    let el = $('#transfer-edit-form');
    let url = $('#transfer-edit-form').attr('action');
    const loading_template = $('#loadingtemplate').html();
    $(`#t_${el.data('transfer_id')}`).html(loading_template);

    $.ajax({
        url: url,
        data: $('#transfer-edit-form').serialize(),
        type: 'POST',
        success: function(result) {
            $('#transferUpdateModal').modal('hide');

            reloadTransfer(el.data('transfer_id'), result);
            toastr.success("{{ __('transfer.meesage.edit.success') }}",
                "{{ __('transfer.meesage.success') }}");
        }
    });
    // Swal.fire({
    //     title: "{{ __('transfer.list.are_you_sure') }}",
    //     text: "{{ __('transfer.list.transfer_confirm_text') }}",
    //     icon: "question",
    //     showCancelButton: true,
    //     confirmButtonText: "{{ __('transfer.list.yes') }}",
    //     cancelButtonText: "{{ __('transfer.list.no') }}",
    //     reverseButtons: true,
    //     customClass: {
    //         confirmButton: "btn btn-success",
    //         cancelButton: 'btn btn-danger'
    //     }
    // }).then(function(result) {
    //     if (result.value) {
    //         event.preventDefault();
    //         $('#form_object').attr('action', el.data('url'));
    //         $('#form_object').submit();
    //         // result.dismiss can be "cancel", "overlay",
    //         // "close", and "timer"
    //     } else if (result.dismiss === "cancel") {
    //         Swal.fire(
    //             "{{ __('transfer.list.cancelled') }}",
    //             "{{ __('transfer.list.confirm_cancelled') }}",
    //             "error"
    //         )
    //     }
    // });
});


// cancel transfer
$('.transfers').on('click', '.cancelTransfer', function() {
    let el = $(this);
    Swal.fire({
        title: "{{ __('transfer.list.are_you_sure') }}",
        text: "{{ __('transfer.list.transfer_cancel_text') }}",
        icon: "question",
        showCancelButton: true,
        confirmButtonText: "{{ __('transfer.list.yes') }}",
        cancelButtonText: "{{ __('transfer.list.no') }}",
        reverseButtons: true,
        customClass: {
            confirmButton: "btn btn-success",
            cancelButton: 'btn btn-danger'
        }
    }).then(function(result) {
        if (result.value) {

            event.preventDefault();
            let url = el.data('url');
            const token = '{{ csrf_token() }}';
            $.ajax({
                url: url,
                data: {
                    '_token': token,
                }, //$('#filterForm').serialize(),
                type: 'POST',
                success: function(result) {
                    reloadTransfer(el.data('transfer_id'), result);

                    toastr.success("{{ __('transfer.meesage.edit.success') }}",
                        "{{ __('transfer.meesage.success') }}");

                }
            });


        } else if (result.dismiss === "cancel") {
            Swal.fire(
                "{{ __('transfer.list.cancelled') }}",
                "{{ __('transfer.list.cancel_cancelled') }}",
                "error"
            )
        }
    });

    // -------
    // const url = el.data('url');
    // const token = '{{ csrf_token() }}';
    // const loading_template = $('#loadingtemplate').html();
    // $(`#t_${el.data('transfer_id')}`).html(loading_template);

});

// attach a driver
function delay(callback, ms) {
    var timer = 0;
    return function() {
        var context = this,
            args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
            callback.apply(context, args);
        }, ms || 0);
    };
}

function get_driver(elem, q) {
    $('.allDrivers').empty();
    $(".driversLoading").show();
    //var data = []; // create an empty array
    let data = {};
    data['transfer_id'] = elem.data('transfer_id');
    if (q) data['q'] = q;
    //console.log('data',data);
    $.ajax({
        url: "{{ route('transfer.drivers') }}",
        data: data,
        type: 'GET',
        success: function(result) {
            $(".driversLoading").hide();
            $(".allDrivers").html(result);
            //console.log(data.data.message);
        }
    });
}

$('.transfers').on('click', '.driverButtonClick', function() {
    get_driver($(this), false);
});
$('.driverSearchInput').on('keyup', delay(function(e) {
    let elem = $(this).parents('.dropdown').find('.driverButtonClick');
    get_driver(elem, $(this).val());
}, 1000));

$('.transfers').on('click', '.addDriver', function() {
    console.log('driver add click');
    let driver_id = $(this).data("id");
    let transfer_id = $(this).attr("data-transfer");
    let name_surname = $(this).attr("data-name");
    let plate = $(this).attr("data-plate");
    let text = `Sürücü atama işlemini onaylıyor musunuz? <br><br> ${name_surname} <br><br> ${plate}`

    Swal.fire({
        title: "Sürücü atanıyor",
        html: text,
        icon: "question",
        showCancelButton: true,
        confirmButtonText: "{{ __('transfer.list.yes') }}",
        cancelButtonText: "{{ __('transfer.list.no') }}",
        reverseButtons: true,
        customClass: {
            confirmButton: "btn btn-success",
            cancelButton: 'btn btn-danger'
        }
    }).then(function(result) {
        if (result.value) {

            event.preventDefault();
            const token = '{{ csrf_token() }}';
            $.ajax({
                url: "{{ route('transfer.attach_driver_to_transfer') }}",
                data: {
                    '_token': token,
                    'transfer_id': transfer_id,
                    'driver_id': driver_id,
                }, //$('#filterForm').serialize(),
                type: 'POST',
                success: function(result) {
                    reloadTransfer(transfer_id, result);

                    toastr.success("{{ __('transfer.meesage.edit.success') }}",
                        "{{ __('transfer.meesage.success') }}");

                }
            });


        } else if (result.dismiss === "cancel") {
            Swal.fire(
                "{{ __('transfer.list.cancelled') }}",
                "{{ __('transfer.list.cancel_cancelled') }}",
                "error"
            )
        }
    });



});
</script>

<script id="loadingtemplate" type="text/template">
    <div class="home-container">
		<div class="placeload">
			<div class="loading-header">
				<div class="header-content">
					<div class="content-shape loads"></div>
					<div class="content-shape loads"></div>
					<div class="content-shape loads"></div>
				</div>
				<div class="header-content">
					<div class="content-shape loads"></div>
					<div class="content-shape loads"></div>
					<div class="content-shape loads"></div>
				</div>
				<div class="header-content">
					<div class="content-shape loads"></div>
					<div class="content-shape loads"></div>
					<div class="content-shape loads"></div>
				</div>
				<div class="img loads"></div>
			</div>
		</div>
	</div>
</script>

@endsection