@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;
    }

    .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')
<!-- Add this right after the @section('content') -->
<div class="modal fade" id="archiveModal" tabindex="-1" role="dialog" aria-labelledby="archiveModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="border-radius: 15px; overflow: hidden;">
            <div class="modal-header border-0">
                <h5 class="modal-title" id="archiveModalLabel" style="font-weight: 600;"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center py-4">
                <div id="archiveIcon" class="mb-4" style="font-size: 3em;"></div>
                <p id="archiveMessage" style="font-size: 1.1em; color: #666;"></p>
            </div>
            <div class="modal-footer border-0 justify-content-center pb-4">
                <button type="button" class="btn btn-secondary px-4" data-dismiss="modal" style="border-radius: 8px;">
                    <i class="fas fa-times"></i> Cancel
                </button>
                <button type="button" id="confirmArchive" class="btn px-4" style="border-radius: 8px;">
                    <i class="fas" id="confirmArchiveIcon"></i> <span id="confirmArchiveText"></span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 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: #e35a80!important;">Orders List</h1>
                </div><!-- /.col -->
                <div class="col-sm-6" style="display: flex;justify-content: end;align-items: center;">
                    @permission('warehouse_purchasing_manage_order')
                    <a id="create-receive" href="/operations/warehouse/purchasing" style="margin-right: 20px;" class="btn btn-info float-right"><i class="fa fa-plus"></i> Create P.O</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-po-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({
        'placeholder' : 'Select Items'
    });
    $("#vendors-select").select2({
        'placeholder' : 'Select Vendors'
    });
    $("#status_select").select2({
        'placeholder' : 'Select Status'
    });

    $("#warehouse-items-datatable").DataTable({
        dom: 'Bfrtip',
        "buttons" : [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        "responsive": true,
        "autoWidth": false,
        "order": [[ 0, "desc" ]],
        ajax: {
            url: '/operations/warehouse/purchasing/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/orders/' + row.ID + '" >' + row.ID + '</a>';
                }
            },
            {data:'VENDOR.NAME', title: 'Name'},
            /*{data:'STATUSDETAILS.NAME', title: 'Status'},*/
            /*{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-po-filters-form').on('click', function (e) {
        e.preventDefault();
        $("#warehouse-items-datatable").DataTable().ajax.reload()
    })

    $(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/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": "5000"
                };
                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.`);
            }
        });
    });
    
    $(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);
            }
        })

    })

</script>
    @endsection