@extends('operations.layout.mainlayout')

<style>
    .action-btn {
        padding: 0.5rem 1rem;
        border-radius: 8px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        font-weight: 500;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 120px;
        justify-content: center;
    }

    .action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    .action-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            to right,
            rgba(255,255,255,0.2),
            rgba(255,255,255,0.5),
            rgba(255,255,255,0.2)
        );
        transition: all 0.5s ease;
    }

    .action-btn:hover::before {
        left: 100%;
    }

    .archive-po {
        background: linear-gradient(145deg, #ff4d4d, #ff6b6b);
        border: none;
        color: white;
        border-radius: 0.75rem !important
    }

    .archive-po:hover {
        background: linear-gradient(145deg, #ff6b6b, #ff4d4d);
        color: white;
    }

    .unarchive-po {
        background: linear-gradient(145deg, #28a745, #34ce57);
        border: none;
        color: white;
        border-radius: 0.75rem !important;
    }

    .unarchive-po:hover {
        background: linear-gradient(145deg, #34ce57, #28a745);
        color: white;
    }

    .fa-archive, .fa-box-open {
        font-size: 1.1em;
    }

    /* Enhanced Archive Toggle Styles */
    .archive-toggle-wrapper {
        padding: 8px 0;
    }

    .archive-toggle {
        position: relative;
        display: inline-block;
        width: 220px;
        height: 40px;
        cursor: pointer;
    }

    .archive-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #ffffff;
        border-radius: 20px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        padding: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        border: 1px solid #e5e7eb;
    }

    .toggle-icon {
        position: absolute;
        width: 32px;
        height: 32px;
        background: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        left: 4px;
        border: 1px solid #e5e7eb;
        z-index: 2;
    }

    .toggle-text {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 12px 0 44px;
        font-weight: 500;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .toggle-text .active {
        color: #28a745;
        transition: color 0.4s;
        font-weight: 600;
    }

    .toggle-text .inactive {
        color: #6c757d;
        transition: color 0.4s;
        font-weight: 500;
    }

    input:checked + .slider {
        background: #e8fff3;
        border-color: #28a745;
    }

    input:checked + .slider .toggle-icon {
        left: calc(100% - 36px);
        background: #28a745;
        border-color: #28a745;
        transform: rotate(360deg);
    }

    input:checked + .slider .toggle-text .active {
        color: #6c757d;
        font-weight: 500;
    }

    input:checked + .slider .toggle-text .inactive {
        color: #28a745;
        font-weight: 600;
    }

    .active-icon {
        display: flex;
        color: #28a745;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .inactive-icon {
        display: none;
        color: #ffffff;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    input:not(:checked) + .slider .toggle-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    input:not(:checked) + .slider .toggle-icon .active-icon {
        display: inline-block;
    }

    input:not(:checked) + .slider .toggle-icon .inactive-icon {
        display: none;
    }

    input:checked + .slider .toggle-icon .active-icon {
        display: none;
    }

    input:checked + .slider .toggle-icon .inactive-icon {
        display: inline-block;
    }

    /* Hover effects */
    .archive-toggle:hover .slider {
        box-shadow: 0 3px 12px rgba(0,0,0,0.12);
    }

    .archive-toggle:hover .toggle-icon {
        box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    }

    /* Focus styles */
    .archive-toggle input:focus + .slider {
        box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
    }

    /* Active state enhancements */
    .archive-toggle:active .toggle-icon {
        transform: scale(0.95);
    }

    /* Smooth transitions */
    .slider, .toggle-icon, .toggle-text, .active-icon, .inactive-icon {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
</style>

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;">Request Orders List</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6" style="display: flex;justify-content: end;align-items: center;">
                        @permission('warehouse_purchasing_manage_request')
                        <a id="create-receive" href="/operations/warehouse/purchasingRequest"
                           style="margin-right: 20px;" class="btn btn-info float-right"><i class="fa fa-plus"></i>
                            Create P.Q</a><br><br>
                        @endpermission
                    </div>
                </div><!-- /.row -->

            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content mx-auto col-md-10" style="max-width: 84%">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">

                        <!-- /.card -->
                        <div class="col-12 col-sm-12 col-md-12">
                            <br/>
                            <div class="card bg-light">
                                <div class="card-header text-muted border-bottom-0">
                                </div>
                                <form method="get" action="" style="width:100%;">
                                    <div class="card-body pt-0">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="row form-group">
                                                    <div class="col-md-4">
                                                        <span class="text-muted text-sm"><b>Date from</b></span>
                                                        <input id="date_from" class="form-control" type="date"
                                                               name="date_from"
                                                               placeholder="Date From"></div>
                                                    <div class="col-md-4">
                                                        <span class="text-muted text-sm"><b>Date to</b></span>
                                                        <input id="date_to" class="form-control" type="date"
                                                               name="date_to"
                                                               placeholder="Date To">
                                                    </div>
                                                    <div class="col-md-4">
                                                        <span class="text-muted text-sm"><b>Vendors</b></span>
                                                        <select id="vendors-select" name="vendors-select"
                                                                multiple>
                                                            @foreach($vendors as $vendor)
                                                                <option value="{{ $vendor->ID }}">{{ $vendor->NAME }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="row form-group">
                                                    <div class="col-md-4">
                                                        <span class="text-muted text-sm"><b>Items</b></span>
                                                        <select name="items_select" multiple id="items_select">
                                                            @foreach($items as $item)
                                                                <option value="{{ $item->ID }}">{{ $item->NAME_EN }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div class="col-md-4">
                                                        <span class="text-muted text-sm"><b>Status</b></span>
                                                        <select name="status_select" multiple id="status_select">
                                                            @foreach($statuses as $status)
                                                                <option value="{{ $status->ID }}">{{ $status->NAME }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <span class="text-muted text-sm"><b>Reference #</b></span>
                                                        <input type="text" class="form-control" placeholder="Reference #" id="reference_number" name="reference_number">
                                                    </div>
                                                </div>

                                                <div class="row form-group">
                                                    <div class="col-md-4">
                                                        <span class="text-muted text-sm"><b>Show Archived</b></span>
                                                        <div class="archive-toggle-wrapper">
                                                            <label class="archive-toggle">
                                                                <input type="checkbox" id="is_archived" name="is_archived" onchange="$('#warehouse-items-datatable').DataTable().ajax.reload()">
                                                                <span class="slider">
                                                                    <span class="toggle-icon">
                                                                        <i class="fas fa-box-open active-icon"></i>
                                                                        <i class="fas fa-archive inactive-icon"></i>
                                                                    </span>
                                                                    <span class="toggle-text">
                                                                        <span class="active">Active</span>
                                                                        <span class="inactive">Archived</span>
                                                                    </span>
                                                                </span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-footer">
                                        <div class="text-right">
                                            <button class="btn btn-sm btn-info" id="loading_button" type="button" disabled
                                                    style="display: none">
                                        <span class="spinner-border spinner-border-sm" role="status"
                                              aria-hidden="true"></span>
                                                Loading...
                                            </button>
                                            <button id="submit-pq-filters-form" type="submit" class="btn btn-sm btn-success">
                                                <i class="fas fa-search"></i> Search
                                            </button>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>
                        <div class="card">

                            <!-- /.card-header -->
                            <div class="card-body">

                                <table id="warehouse-items-datatable"
                                       class="table table-bordered table-striped"></table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <div class="modal fade" id="modal-sys-locations">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Select Location</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="row form-group">
                    <div class="col" style="text-align: center;">
                        <div class="alert alert-danger alert-danger-item" role="alert" style="display: none;"></div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <select class="form-control" name="wh-location" id="wh-location"></select>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button style="width:130px;" type="button" class="btn btn-default" data-dismiss="modal">Cancel
                    </button>
                    <button style="width:130px;" type="button" class="btn btn-info" id="wh-location-submit-btn">Submit</button>

                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection

@section('warehouse_scripts')
    <script>

        $("#items_select").select2();
        $("#vendors-select").select2();
        $("#status_select").select2();

        $("#warehouse-items-datatable").DataTable({
            dom: 'Bfrtip',
            "buttons": [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            "responsive": true,
            "autoWidth": false,
            "order": [[0, "desc"]],
            ajax: {
                url: '/operations/warehouse/purchasing-request/ordersTable',
                "data": function ( d ) {
                    d.date_from = $('#date_from').val();
                    d.date_to = $('#date_to').val();
                    d.items = $('#items_select').val();
                    d.vendors = $('#vendors-select').val();
                    d.status = $('#status_select').val();
                    d.reference_number = $('#reference_number').val();
                    d.is_archived = $('#is_archived').is(':checked') ? 1 : 0;
                }
            },
            columns: [
                {
                    title: 'ID', "mRender": function (data, type, row) {
                        if (row.IS_ARCHIVE) {
                            return row.ID;
                        }
                        return '<a href="/operations/warehouse/purchasing-request/orders/' + row.ID + '" >' + row.ID + '</a>';
                    }
                },
                {data: 'VENDOR.NAME', title: 'Name'},
                /*{
                    title: 'Status', "mRender": function (data, type, row) {
                        if (row.STATUSDETAILS.BADGE === 'badge-danger')
                            return  '<span class="badge py-3 px-4" style="line-height: 0;color: var(--blazma-primary);background-color: var(--blazma-pale);">' +
                                ''+row.STATUSDETAILS.NAME+'' +
                                '</span>'

                        if (row.STATUSDETAILS.BADGE === 'badge-warning')
                            return  '<span class="badge py-3 px-4" style="line-height: 0;color: #00B2FF;background-color: #F1FAFF;">' +
                                ''+row.STATUSDETAILS.NAME+'' +
                                '</span>'
                        else
                            return  '<span class="badge py-3 px-4" style="line-height: 0;color: #50CD89;background-color: #E8FFF3;">' +
                                ''+row.STATUSDETAILS.NAME+'' +
                                '</span>'


                    }
                },*/
                /*{data: 'REFERENCE_NUMBER', title: 'Reference #'},*/
                {
                    title: 'Reference #', "mRender": function (data, type, row) {
                        return '<span class="badge py-2 px-1" style="font-size: 15px">'+row.REFERENCE_NUMBER+'</span>'
                    }
                },
                {data: 'ORDER_ITEMS_COUNTS', title: 'Number of items'},
                {data: 'BASE_AMOUNT', title: 'Amount without tax'},
                {data: 'TOTAL_AMOUNT', title: 'Total Amount'},
                {data: 'LOCATION.text', title: 'Location'},
                {data: 'created_at', title: 'Purchase Request Date'},
                {
                    title: 'Status', "mRender": function (data, type, row) {
                        return '<span class="badge '+row.STATUSDETAILS.BADGE+'">'+row.STATUSDETAILS.NAME+'</span>'
                    }
                },
                {
                    title: 'Actions', 
                    "mRender": function (data, type, row) {
                        let archiveBtn = '';
                        if (!row.IS_ARCHIVE) {
                            archiveBtn = `<button class="action-btn archive-po btn-sm" data-id="${row.ID}">
                                <i class="fas fa-archive fa-sm"></i>
                                <span>Archive</span>
                            </button>`;
                        } else {
                            archiveBtn = `<button class="action-btn unarchive-po btn-sm" data-id="${row.ID}">
                                <i class="fas fa-box-open"></i>
                                <span>Unarchive</span>
                            </button>`;
                        }
                        return archiveBtn;
                    }
                }
            ]
        });

        $('#submit-pq-filters-form').on('click', function (e) {
            e.preventDefault();
            $("#warehouse-items-datatable").DataTable().ajax.reload()
            /*$(this).css('display', 'none');
            $('#loading_button').css('display', 'initial')
            e.preventDefault();*/
            /*let date_from = $('#date_from').val();
            let date_to = $('#date_to').val();
            let items = $('#items_select').val();
            let vendors = $('#vendors-select').val();
            let status = $('#status_select').val();
            $.ajax({
                url: '/operations/warehouse/purchasing-request/ordersDataTable',
                type: 'get',
                data: {
                    vendors: vendors,
                    date_from: date_from,
                    date_to: date_to,
                    status: status,
                    items: items
                },
                success: function (data) {
                    $('#request-orders-data-table').html("")
                    $('#request-orders-data-table').html(data.html)
                    $('#submit-pq-filters-form').css('display', 'initial');
                    $('#loading_button').css('display', 'none')
                }
            });*/
        })

        $(document).on('change', '.item-status', function (e) {
            let item_id = $(this).attr('id');
            var data = {
                item_id: item_id,
            }
            if ($(this).is(":checked")) {
                data['status'] = 1;
                $.ajax({
                    url: "/operations/warehouse/item/status/" + item_id,
                    data: data,
                    contentType: "application/json; charset=utf-8",
                }).done(function (data) {
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    alert("Error while changing vendor");
                });

            } else {
                data['status'] = 0;
                $.ajax({
                    url: "/operations/warehouse/item/status/" + item_id,
                    data: data,
                    contentType: "application/json; charset=utf-8",
                }).done(function (data) {
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    alert("Error while changing vendor");
                });
            }
        })

        $('#create-receive').on('click', function (e) {
            e.preventDefault();
            var href = $(this).attr('href');
            $.ajax({
                url: '/operations/warehouse/system-user/storableLocations',
                success: function (res) {
                    let options =[]
                    $('#wh-location').empty();
                    $.each(res , function (key, value) {
                        options += '<option  value="'+value.id+'">'+value.text+'</option>'
                    })
                    $('#wh-location').select2().append(options);
                    $('#wh-location-submit-btn').off();
                    $('#wh-location-submit-btn').on('click', function (e) {
                        e.preventDefault();
                        let selectedLocation = $('#wh-location option:selected').attr('value');
                        window.location.href = href+'?wh='+selectedLocation;
                    })
                    $('#modal-sys-locations').modal('show');
                },
                error: function (error) {
                    toastr.error(error.responseJSON.errorMessage);
                }
            })

        })

        $(document).on('click', '.archive-po, .unarchive-po', function(e) {
            e.preventDefault();
            const poId = $(this).data('id');
            const isArchive = $(this).hasClass('archive-po');
            const action = isArchive ? 'archive' : 'unarchive';
            
            $.ajax({
                url: `/operations/warehouse/purchasing-request/orders/${poId}/archive`,
                method: 'POST',
                data: {
                    is_archive: isArchive ? 1 : 0
                },
                success: function(response) {
                    toastr.options = {
                        "closeButton": true,
                        "progressBar": true,
                        "positionClass": "toast-top-right",
                        "timeOut": "3000"
                    };
                    toastr.success(response.message);
                    $("#warehouse-items-datatable").DataTable().ajax.reload();
                },
                error: function(xhr) {
                    toastr.options = {
                        "closeButton": true,
                        "progressBar": true,
                        "positionClass": "toast-top-right",
                        "timeOut": "3000"
                    };
                    toastr.error(xhr.responseJSON?.message || `Failed to ${action} purchase order.`);
                }
            });
        });

    </script>
@endsection