@extends('layout.layout')

@section('content')
<div class="container">
    <section class="open_inv">
        <h2>Deschideti inventar</h2>
        <form id="open_inventory">
            <h2 id="planned_date" class="text-primary text-center fw-bold"></h2>
            <div id="error_open_inventory"></div>
            @csrf
            <div class="two_inputs_per_line">
                <div class="contains_label_input">
                    <label for="">Deschide inventar</label>
                    <div class="d-flex">
                        <select class="input_style" name="branch" id="inventory_id">
                            <option value="">Alegeti invetar</option>
                            @foreach ($inventories as $inventory)
                            <option value="{{ $inventory->branch }}" data-id="{{ $inventory->id }}"
                                data-plan="{{ $inventory->planned_date }}">{{ $inventory->name }}</option>
                            @endforeach
                        </select>
                        <button type="button" class="btn btn-danger hidden_btn_to_delete_inv" id="btn_delete_inv"
                            data-bs-toggle="modal" data-bs-target="#deleteInventoryModal">Sterge inventarul</button>

                        <div class="modal fade" id="deleteInventoryModal" tabindex="-1"
                            aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title fw-bold text-danger" id="delete_modal_inv_title"></h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <input type="hidden" value="" id="inventory_id_to_delete"
                                            name="delete_inventory_id">
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                                            id="trigger_delete_inventory_click">Close</button>
                                        <button type="button" class="btn btn-danger" onclick="delete_inventory()">Sterge
                                            inventarul</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" id="inventory_id_hidden" name="inventory_id">
                    <button class="normal_btn blue mt-2" id="open_inv_btn">Deschide inventar</button>
                </div>
        </form>
    </section>
</div>
@push('js')
<script>
    $(function () {
        $("#open_inventory").on('submit', function (e) {
            e.preventDefault();
            $.ajax({
                url: '/open-inventory',
                method: 'POST',
                data: new FormData(this),
                processData: false,
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                contentType: false,
                success: function (data) {
                    $('#open_inventory')[0].reset();
                    $("#error_open_inventory").html(data.success);
                    $("#error_open_inventory").fadeTo(2000, 500).slideUp(500);
                    $("#error_open_inventory").slideUp(500);
                    $("#open_inventory").load(window.location + " #open_inventory");
                    $("#inventory_id").select2("destroy");
                    $("#inventory_id").select2();
                    $("#planned_date").html('');

                },
                error: function (error) {
                    $("#error_open_inventory").html(error.responseJSON.fail);
                    $("#error_open_inventory").fadeTo(2000, 500).slideUp(500);
                    $("#error_open_inventory").slideUp(500);
                }
            });
        });
    });

    $("#inventory_id").on('change', function () {
        var id = $(this).find(':selected').attr('data-id');
        $("#inventory_id_hidden").val(id)
    })

    $('#inventory_id').on('change', function () {
        var planned_date = $(this).find(':selected').attr('data-plan').substring(-8);
        var id = $(this).find(':selected').attr('data-id');
        var name = $(this).find(':selected').text();
        var show_planned = planned_date.slice(0, 10);
        $('#planned_date').text('Inventarul pe care l-ati ales are data planificata la: ' + show_planned);
        var today = new Date();
        if (today.toISOString().substring(0, 10) >= planned_date.substring(0, 10)) {
            $("#btn_delete_inv").addClass('hidden_btn_to_delete_inv');
        } else {
            $("#btn_delete_inv").removeClass('hidden_btn_to_delete_inv');
            $("#inventory_id_to_delete").val(id);
            $("#delete_modal_inv_title").html('Esti sigur ca vrei sa stergi inventarul cu numele ' + name);
        }
    });

    function delete_inventory() {
        var id = $("#inventory_id_to_delete").val();
        $.ajax({
            url: '/delete_inventory',
            method: 'POST',
            data: {
                id,
                "_token": "{{ csrf_token() }}"
            },
            success: function (response) {
                $('body').removeClass('modal-open');
                $('.modal-backdrop').remove();
                $('#error_open_inventory').html(response.message);
                $("#trigger_delete_inventory_click").trigger('click');
                $("#error_open_inventory").fadeTo(2000, 500).slideUp(500);
                $("#error_open_inventory").slideUp(500);
                setTimeout(function () {
                    window.location.reload();
                }, 1000)
            },
            error: function (error) {
                $("#error_open_inventory").html(error.responseJSON.message_modal);
                $("#error_open_inventory").fadeTo(2000, 500).slideUp(500);
                $("#error_open_inventory").slideUp(500);
            }
        })
    }

</script>
@endpush
@endsection