@extends('admin.layout.template')
@section('title', 'Models')
@section('content')

<div class="page-content">
    <div class="container-xxl">

        <!-- Add Category Card -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title d-flex align-items-center gap-1">
                            <iconify-icon icon="solar:settings-bold-duotone" class="text-primary fs-20"></iconify-icon>
                            Add Models
                        </h4>
                    </div>
                    <div class="card-body">
                        <form id="addModelForm">
                            @csrf

                            <div class="row">

                                <!-- Column 1 -->
                                <div class="col-lg-4">

                                    <div class="mb-3">
                                        <label class="form-label fw-medium">Category</label>
                                        <select name="category_id" class="form-control" required>
                                            <option value="">Select Category</option>
                                            @foreach($categories as $cat)
                                            <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label fw-medium">Sub Category</label>
                                        <select name="sub_category_id" class="form-control">
                                            <option value="">Select Sub Category</option>
                                            @foreach($subCategories as $sub)
                                            <option value="{{ $sub->id }}">{{ $sub->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label fw-medium">Model Name</label>
                                        <input type="text"
                                            name="name"
                                            class="form-control"
                                            placeholder="Enter Model Name"
                                            required>
                                    </div>

                                </div>


                                <!-- Column 2 -->
                                <div class="col-lg-4">

                                    <div class="mb-3">
                                        <label class="form-label fw-medium">Unit Type</label>
                                        <select name="unit_type" class="form-control">
                                            <option value="meter">Meter</option>
                                            <option value="sqft">Sqft</option>
                                            <option value="roll">Roll</option>
                                            <option value="piece">Piece</option>
                                        </select>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label fw-medium">Calculation Type</label>
                                        <select name="calculation_type" class="form-control">
                                            <option value="curtain">Curtain</option>
                                            <option value="roman">Roman</option>
                                            <option value="blinds">Blinds</option>
                                            <option value="wallpaper">Wallpaper</option>
                                            <option value="sofa">Sofa</option>
                                        </select>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label fw-medium">Fabric Price</label>
                                        <input type="number"
                                            step="0.01"
                                            name="fabric_price"
                                            class="form-control"
                                            placeholder="Enter Fabric Price">
                                    </div>

                                </div>


                                <!-- Column 3 -->
                                <div class="col-lg-4">

                                    <div class="mb-3">
                                        <label class="form-label fw-medium">Accessories Price</label>
                                        <input type="number"
                                            step="0.01"
                                            name="accessories_price"
                                            class="form-control"
                                            placeholder="Enter Accessories Price">
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label fw-medium">Without Fitting Price</label>
                                        <input type="number"
                                            step="0.01"
                                            name="without_fitting_price"
                                            class="form-control"
                                            placeholder="Enter Without Fitting Price">
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label fw-medium">With Fitting Price</label>
                                        <input type="number"
                                            step="0.01"
                                            name="with_fitting_price"
                                            class="form-control"
                                            placeholder="Enter With Fitting Price">
                                    </div>

                                </div>

                            </div>

                            <!-- Submit Button -->
                            <div class="text-end mt-3">
                                <button type="submit" class="btn btn-success px-4">
                                    Save Model
                                </button>
                            </div>

                        </form>
                    </div>




                </div>
            </div>
        </div>

        <!-- Category Table -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-bordered mt-4" id="modelTable">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Name</th>
                                        <th>Category</th>
                                        <th>Sub Category</th>
                                        <th>Unit</th>
                                        <th>Type</th>
                                        <th>Base Price</th>
                                        <th>Role Prices</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="modal fade" id="rolePriceModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">

                <form id="rolePriceForm">
                    @csrf

                    <input type="hidden" name="product_model_id" id="product_model_id">

                    <select name="role_id" class="form-control mb-2">
                        @foreach($roles as $role)
                        <option value="{{ $role->id }}">{{ $role->name }}</option>
                        @endforeach
                    </select>

                    <input type="number" step="0.01" name="fabric_price" placeholder="Fabric Price" class="form-control mb-2">
                    <input type="number" step="0.01" name="accessories_price" placeholder="Accessories Price" class="form-control mb-2">
                    <input type="number" step="0.01" name="without_fitting_price" placeholder="Without Fitting" class="form-control mb-2">
                    <input type="number" step="0.01" name="with_fitting_price" placeholder="With Fitting" class="form-control mb-2">

                    <button class="btn btn-primary">Save</button>

                </form>

            </div>
        </div>
    </div>
</div>

<script>
    // Pass countries as JSON
    $(function() {

        var table = $('#modelTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('get-product-models') }}",

            columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'name'
                },
                {
                    data: 'category'
                },
                {
                    data: 'sub_category'
                },
                {
                    data: 'unit_type'
                },
                {
                    data: 'calculation_type'
                },
                {
                    data: 'base_price',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'role_price',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'status',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
            order: [
                [1, 'desc']
            ], // order by name or change to your need
        });

        $('#addModelForm').submit(function(e) {
            e.preventDefault();
            $.post("{{ route('add-product-model') }}", $(this).serialize(), function(res) {
                Swal.fire('Success', res.success, 'success');
                table.ajax.reload();
                $('#addModelForm')[0].reset();
            });
        });

        $(document).on('click', '.deleteModel', function() {
            let id = $(this).data('id');
            $.ajax({
                url: "{{ url('/delete-product-model/') }}/" + id,
                type: "DELETE",
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function(res) {
                    Swal.fire('Deleted', res.success, 'success');
                    table.ajax.reload();
                }
            });
        });

        $(document).on('click', '.addRolePrice', function() {
            $('#product_model_id').val($(this).data('id'));
            $('#rolePriceModal').modal('show');
        });

        $('#rolePriceForm').submit(function(e) {
            e.preventDefault();
            $.post("{{ route('save-role-price') }}", $(this).serialize(), function(res) {
                Swal.fire('Saved', res.success, 'success');
                $('#rolePriceModal').modal('hide');
            });
        });

    });

    $(document).on('click', '.addModelImage', function() {

        let model_id = $(this).data('id');

        Swal.fire({
            title: 'Upload Model Image',
            html: `<input type="file" id="modelImage" class="swal2-file">`,
            showCancelButton: true,
            confirmButtonText: 'Upload',
            preConfirm: () => {

                let file = $('#modelImage')[0].files[0];

                if (!file) {
                    Swal.showValidationMessage('Please select an image');
                    return false;
                }

                let formData = new FormData();
                formData.append('photo', file);
                formData.append('model_id', model_id);
                formData.append('_token', '{{ csrf_token() }}');

                return $.ajax({
                    url: "{{ route('product-models.uploadImage') }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false
                }).then(response => {

                    if (!response.success) {
                        throw new Error(response.message);
                    }

                    return response;

                }).catch(error => {
                    Swal.showValidationMessage(`Upload failed`);
                });
            }

        }).then((result) => {

            if (result.isConfirmed) {

                Swal.fire(
                    'Uploaded!',
                    'Model image uploaded successfully.',
                    'success'
                );

            }
            location.reload();
        });

    });
</script>

@endsection