@extends('layouts.master')
@section('css')
<!-- Internal Data table css -->
<link href="{{ URL::asset('assets/plugins/datatable/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/datatable/css/buttons.bootstrap4.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/datatable/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/datatable/css/jquery.dataTables.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/datatable/css/responsive.dataTables.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">
<!-- Internal Spectrum-colorpicker css -->
<link href="{{ URL::asset('assets/plugins/spectrum-colorpicker/spectrum.css') }}" rel="stylesheet">

<style>
    /* ==========================================================
       Stock / Inventory Modern Styling
       ========================================================== */
    body {
        background-color: #f1f5f9;
        font-family: 'Segoe UI', Tahoma, 'Inter', sans-serif;
    }

    /* كروت الأقسام */
    .stock-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 22px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
        margin-bottom: 22px;
    }

    /* حقول البحث والفلترة */
    .stock-filter-label {
        font-size: 13.5px;
        font-weight: 800;
        color: #334155;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .stock-search-input {
        border: 1.5px solid #cbd5e1 !important;
        border-radius: 9px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        padding: 10px 14px !important;
        color: #0f172a !important;
        transition: all 0.2s ease;
    }

    .stock-search-input:focus {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
        background: #ffffff !important;
    }

    /* جدول عرض المنتجات */
    .stock-table-container {
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        background: #ffffff;
    }

    .stock-table {
        margin-bottom: 0 !important;
        border: none !important;
    }

    .stock-table thead th {
        background: #0f172a !important;
        color: #ffffff !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        padding: 14px 10px !important;
        border: none !important;
        white-space: nowrap;
    }

    .stock-table tbody td {
        vertical-align: middle !important;
        padding: 12px 10px !important;
        font-size: 14px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        color: #1e293b;
    }

    .stock-table tbody tr:hover {
        background-color: #f8fafc !important;
    }

    /* مودال الحذف */
    .modal-content-demo {
        border-radius: 14px !important;
        border: none !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        overflow: hidden;
    }

    .modal-header-danger {
        background: #ef4444;
        color: #ffffff;
        padding: 16px 20px;
    }

    .modal-header-danger .modal-title {
        font-weight: 800;
        font-size: 16px;
    }
</style>
@section('title')
{{ __('home.stock') }}
@stop
@endsection

@section('page-header')
<div class="main-parent">
    <div class="breadcrumb-header justify-content-between parent-heading mb-3">
        <div class="my-auto">
            <div class="d-flex align-items-center">
                <div class="bg-primary text-white rounded d-flex align-items-center justify-content-center mr-2" style="width: 36px; height: 36px;">
                    <i class="fa fa-cubes" style="font-size: 17px;"></i>
                </div>
                <h4 class="mb-0 font-weight-bold" style="color: #0f172a;">{{ __('home.stock') }}</h4>
                <span class=" font-weight-bold">- استعراض ومراقبة المخزون المتاح</span>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')

@if (count($errors) > 0)
<div class="alert alert-danger font-weight-bold shadow-sm" style="border-radius: 10px;">
    <button aria-label="Close" class="close" data-dismiss="alert" type="button">
        <span aria-hidden="true">&times;</span>
    </button>
    <strong>خطأ</strong>
    <ul class="mb-0 mt-1">
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<input type="hidden" id="token_search" value="{{ csrf_token() }}">

<!-- row -->
<div class="row">
    <div class="col-xl-12">

        {{-- كارت البحث والفلاتر --}}
        <div class="stock-card">
            {{ csrf_field() }}

            <div class="row align-items-end">
                {{-- حقل البحث بالاسم أو الرقم --}}
                <div class="col-lg-4 col-md-6 mb-3 mb-lg-0">
                    <label for="searchaboutproduct" class="stock-filter-label">
                        <i class="fa fa-search text-primary"></i> {{ __('home.searchaboutproduct') }}
                    </label>
                    <input dir="auto" type="text" class="form-control stock-search-input"
                        placeholder="{{ __('home.Search By Name or Product Number') }}"
                        id="searchaboutproduct" name="searchaboutproduct"
                        onkeyup="searchaboutproductfunction()">
                </div>

                {{-- فلترة حسب المجموعة --}}
                <div class="col-lg-4 col-md-6 mb-3 mb-lg-0">
                    <label for="product_group" class="stock-filter-label">
                        <i class="fa fa-th-large text-info"></i> {{ __('home.groups') }}
                    </label>
                    <select style="width:100% !important" name="product_group" id="product_group" class="form-control select2">
                        @foreach (App\Models\products_group::get() as $section)
                            <option value="{{ $section->id }}">{{ $section->group_ar }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- فلترة حسب الفرع --}}
                <div class="col-lg-4 col-md-12">
                    <label for="branchs_id" class="stock-filter-label">
                        <i class="fa fa-building-o text-success"></i> {{ __('users.branch') }}
                    </label>
                    <select class="form-control select2" name="branchs_id" id="branchs_id" style="width:100% !important;">
                        <option value="0">كل الفروع (-)</option>
                        @foreach (App\Models\branchs::get() as $section)
                            <option value="{{ $section->id }}">{{ $section->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        {{-- حاوية جدول المنتجات والأجاكس --}}
        <div class="stock-card p-0">
            <div id="ajax_responce_serarchDiv" class="stock-table-container table-responsive">
                <table class="table text-center stock-table our-table" id="example2" width="100%">
                    <thead>
                        <tr>
                            <th width="4%">#</th>
                            <th width="12%">{{ __('home.productNo') }}</th>
                            <th width="22%" class="text-right pr-4">{{ __('home.product') }}</th>
                            <th width="12%">{{ __('home.branch') }}</th>
                            <th width="12%">{{ __('home.productlocation') }}</th>
                            <th width="10%">{{ __('home.quantity') }}</th>
                            <th width="14%">{{ __('home.purchaseproductwithouttax') }}</th>
                            <th width="14%">{{ __('home.sellingproduct without tax') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="8" class="text-center py-4 text-muted font-weight-bold">
                                جاري تحميل بيانات المخزون...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>
<!-- row closed -->

{{-- مودال حذف المنتج --}}
<div class="modal fade" id="delete_quotation" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-header modal-header-danger d-flex align-items-center justify-content-between">
                <h6 class="modal-title mb-0">
                    <i class="fa fa-trash ml-1"></i> {{ __('home.alert') }}
                </h6>
                <button aria-label="Close" class="close text-white" data-dismiss="modal" type="button" style="opacity: 0.9;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form>
                {{ csrf_field() }}
                <div class="modal-body p-4 text-center">
                    <i class="fa fa-exclamation-triangle fa-3x text-danger mb-3"></i>
                    <h6 class="font-weight-bold text-dark mb-2">{{ __('home.Are_you_sure_delete') }}</h6>
                    <p class="text-muted small">هذا الإجراء سيقوم بحذف المنتج نهائياً من قاعدة البيانات.</p>
                    <input type="hidden" name="delete_id" id="delete_id">
                </div>

                <div class="modal-footer bg-light d-flex justify-content-center p-3">
                    <button type="button" class="btn btn-secondary px-4 font-weight-bold" data-dismiss="modal" style="border-radius: 8px;">
                        {{ __('home.cancel') }}
                    </button>
                    <button id="delete_quotation_function" type="button" data-dismiss="modal" class="btn btn-danger px-4 font-weight-bold" style="border-radius: 8px;">
                        {{ __('home.confirm') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('js')
<!-- Internal Data tables -->
<script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ URL::asset('assets/js/table-data.js') }}"></script>

<!-- Select2 & Form Elements -->
<script src="{{ URL::asset('assets/plugins/select2/js/select2.min.js') }}"></script>
<script src="{{ URL::asset('assets/js/form-elements.js') }}"></script>

<script>
    $('#delete_quotation').on('show.bs.modal', function(event) {
        var button = $(event.relatedTarget);
        var id = button.data('id');
        $('#delete_id').val(id);
    });

    $("#delete_quotation_function").click(function(e) {
        var selectCustomer = $('#delete_id').val();
        if (selectCustomer != '') {
            $.ajax({
                url: "{{ URL::to('delete_product') }}/" + selectCustomer,
                type: "GET",
                dataType: "html",
                success: function(products) {
                    $("#ajax_responce_serarchDiv").html(products);
                },
            });
        }
    });
</script>

<script>
function searchaboutproductfunction() {
    var searchtext = $('#searchaboutproduct').val();
    var token_search = $("#token_search").val();
    var selectclientid = $("#branchs_id").val();

    jQuery.ajax({
        url: "{{ URL::to('searchAllproductpaginatenew_by_post') }}",
        type: 'post',
        cache: false,
        dataType: 'html',
        data: {
            "_token": token_search,
            "searchtext": searchtext,
            "branchs_id": selectclientid,
        },
        success: function(data) {
            $("#ajax_responce_serarchDiv").html(data);
        },
    });
}

$(document).on('click', '#ajax_pagination_in_search a', function(e) {
    e.preventDefault();
    var search_by_text = $("#searchaboutproduct").val();
    var url = $(this).attr("href");
    var token_search = $("#token_search").val();
    var selectclientid = $("#branchs_id").val();

    jQuery.ajax({
        url: url,
        type: 'post',
        cache: false,
        dataType: 'html',
        data: {
            "_token": token_search,
            "searchtext": search_by_text,
            "branchs_id": selectclientid,
        },
        success: function(data) {
            $("#ajax_responce_serarchDiv").html(data);
        }
    });
});
</script>

<script>
$(document).ready(function() {
    var searchtext = '';
    var token_search = $("#token_search").val();
    var selectclientid = $("#branchs_id").val();

    jQuery.ajax({
        url: "{{ URL::to('searchAllproductpaginatenew_by_post') }}",
        type: 'post',
        cache: false,
        dataType: 'html',
        data: {
            "_token": token_search,
            "searchtext": searchtext,
            "branchs_id": selectclientid,
        },
        success: function(data) {
            $("#ajax_responce_serarchDiv").html(data);
        },
    });

    $('select[name="product_group"]').on('change', function() {
        var selectclientid = $(this).val();
        var token_search = $("#token_search").val();
        var search_by_text = $("#searchaboutproduct").val();

        if (selectclientid) {
            $.ajax({
                url: "{{ URL::to('product_group_ajax') }}",
                type: 'post',
                cache: false,
                dataType: 'html',
                data: {
                    "_token": token_search,
                    "group_id": selectclientid,
                    "searchtext": search_by_text,
                },
                success: function(products) {
                    $("#ajax_responce_serarchDiv").html(products);
                },
            });
        }
    });

    $('select[name="branchs_id"]').on('change', function() {
        var selectclientid = $(this).val();
        var token_search = $("#token_search").val();
        var search_by_text = $("#searchaboutproduct").val();

        if (selectclientid) {
            $.ajax({
                url: "{{ URL::to('product_branchs_id_ajax') }}",
                type: 'post',
                cache: false,
                dataType: 'html',
                data: {
                    "_token": token_search,
                    "branchs_id": selectclientid,
                    "searchtext": search_by_text,
                },
                success: function(products) {
                    $("#ajax_responce_serarchDiv").html(products);
                },
            });
        }
    });
});
</script>
@endsection